文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >不同屏幕分辨率嵌套div结构中div的高度

问不同屏幕分辨率嵌套div结构中div的高度
EN

Stack Overflow用户
提问于 2017-04-10 10:15:31
回答 1查看 76关注 0票数 1

我有一个带有嵌套DIVs的网页。我的问题是，如何确保其中之一(id=first_tab，second_tab)填满其父(id=div_korpus)的空间，以便在所有屏幕分辨率和浏览器中看起来都是一样的。(我指围绕左边面板的线)。

目前，我使用"em“单位来测量它们的高度，这是最有效的，但在较高的屏幕分辨率下，它并不能感觉到整个父元素(它下面可能有很多空间)。我试着使用一个视口单元("vh")，但是它产生了类似的效果，当单击链接Ln1、Ln2、Ln3时，它也会向上移动整个左面板。

在这里我应该用什么度量单位来使它工作？

https://jsfiddle.net/crfpp0jn/

​

代码语言：javascript
复制
html {
  overflow: hidden;
  height: 100%;
}

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-size: 1em;
  width: 100%;
  height: 100%;
}

html {
  overflow: hidden;
  height: 100%;
}

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 18em;
  overflow: hidden;
}

#main {
  position: absolute;
  top: 19%;
  left: 26%;
  right: 8px;
  bottom: 5%;
  overflow: auto;
}

#side {
  position: absolute;
  top: 8em;
  left: 5px;
  bottom: 5%;
  width: 25%;
  overflow: hidden;
}

p {
  padding: 10px;
  margin: 0 0 .5em 0
}


/************************* TABS PART **********************/

.korpus>div,
.korpus>input {
  display: none;
}

.korpus label {
  padding: 5px;
  border: 1px solid #aaa;
  line-height: 27px;
  cursor: pointer;
  position: relative;
  bottom: 1px;
  background: #fff;
}

.korpus input[type="radio"]:checked+label {
  border-bottom: 2px solid #fff;
}

.korpus>input:nth-of-type(1):checked~div:nth-of-type(1),
.korpus>input:nth-of-type(2):checked~div:nth-of-type(2) {
  display: block;
  padding: 5px;
  border: 1px solid #aaa;
}
代码语言：javascript
复制
<body>
  <div id="header">
    <table width="100%" cellspacing="5" cellpadding="0">
      <tr>
        <td>
          <table bgcolor="#ffffff" width="100%" cellspacing="0" cellpadding="0">
            <tr>
              <td bgcolor="green">
                <p align="left">
                  <font face="Calibri, sans-serif">
                    <font style="font-size: 22pt; color: white" size="5"><b>&nbsp;&nbsp;This is the Header</b></font>
                  </font>
                </p>
              </td>
            </tr>
            <tr>
              <td bgcolor="#191919" colspan="3">
                <div style="text-align:left">
                  <font style="font-size: 22px" face="Calibri, sans-serif">
                    <a style="color: #ffffff; text-decoration: none" href="item1.html"><span style='font-size:16.0pt;color:white;font-family:"Calibri","sans-serif"'>&nbsp;&nbsp;<b>Item 1</b></span></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a style="color: #ffffff; text-decoration: none" href="item2.html">
                      <span style='font-size:16.0pt;color:white;font-family:"Calibri","sans-serif"'><b>Item 2</b></span></a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a style="color: #ffffff; text-decoration: none" href="item3.html">
                      <span style='font-size:16.0pt;color:white;font-family:"Calibri","sans-serif"'><b>Item 3</b></span></a>
                  </font>
                </div>
              </td>
            </tr>
            <tr>
              <td bgcolor="#191919">
                <div style="text-align:left" align="center">
                  <font style="font-size: 17px" face="Calibri, sans-serif"><a style="color: #ffffff; text-decoration: none" href="item4.html"><span style='font-size:14.0pt;color:white;font-family:"Calibri","sans-serif"'>&nbsp;&nbsp;Item 4</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a style="color: #ffffff; text-decoration: none" href="item5.html"><span style='font-size:14.0pt;color:white;font-family:"Calibri","sans-serif"'>&nbsp;&nbsp;Item 5</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a style="color: #ffffff; text-decoration: none" href="item6.html">
                      <span style='font-size:14.0pt;color:white;font-family:"Calibri","sans-serif"'>Item 6</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font>
                </div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
  <div id="side">
    <div style="height:3px"></div>
    <!-- BLANK LINE ABOVE TABS -->
    <div id="div_korpus" class="korpus">
      <input type="radio" name="one" checked="checked" id="vkl1" />
      <label for="vkl1">Tab A</label>
      <input type="radio" name="one" id="vkl2" />
      <label for="vkl2">Tab B</label><input type="radio" name="one" id="vkl3" />
      <div id="first_tab" style="height: 23em">
        <!-- FIRST TAB -->

        <p>
          <a href="#ln1">Ln1</a>
          <a href="#ln2">Ln2</a>
          <a href="#ln3">Ln3</a>
          <!-- SCROLL DIV -->
        </p>
        <div id="scrolldiv" style="height: 20em; overflow-y:scroll">
          <p>
            <font style="font-size: 14px; font-weight:bold; color:black" face="TimesNewRoman">
              <span><a>one</a></span><br>
              <span><a>two</a></span><br>
              <span><a>three</a></span><br>
              <span><a name="ln1">1. Link1</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a name="ln2">2. Link2</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a name="ln3">3. Link3</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
          </p>
          </font>
        </div>
        <!-- SCROLL DIV ENDS -->
      </div>
      <!-- FIRST TAB ENDS -->
      <div id="second_tab" style="height: 23em">
        <!-- SECOND TAB -->
        <br>
        <p align="center">
          <font face="Calibri, sans-serif">
            <font size="3" style="font-size: 12pt">Some more stuff here</font>
          </font><br><br>
      </div>
      <!-- SECOND TAB ENDS -->
    </div>
    <!-- KORPUS ENDS -->
  </div>
  <!-- LEFT FRAME ENDS -->
  <div id="main">
    <p id="lex" style="margin-left:2cm; margin-top:1cm">Some general text here
    </p>
  </div>

​

html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-10 11:21:14

你可以使用挠性箱程序！

我不得不放弃你上面写的一切，从头开始，但这是我推荐你的方向。

您也不应该应用任何内联样式。所有样式都属于您的样式表。

​

代码语言：javascript
复制
html, body, div, span, h1, h2, p, th, td, a, em, img, strong, ul, li, form, label, h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
  border: none;
}
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
html, body, form, #Site {
  height: 100%;
  position: relative;
}
#Site{
  overflow: auto;
  background:#eee;
}
header{
  background:#008000;
  color:#fff;
  font-family:Calibri, sans-serif;
}
header h1{
  padding:10px;
}
header ul{
 background:#191919;
 list-style:none;
}
header li{
  padding:5px;
}
#Lst1{
  font-size:1.2em;
  font-weight:700;
}
#MainWrap{
  height:100%;
  overflow:auto;
  padding:6px 3px;
}
.Flx {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.FlxCol {
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}
.Flx1 {
  -ms-flex: 1;
  -webkit-box-flex: 1;
  flex: 1;
}

 /************************* TABS PART **********************/

aside{
  -ms-flex: 200px 0 1;
  -webkit-box-flex: 200px 0 1;
  flex: 200px 0 1;
  max-height:100%;
}
.tab{
  background:#fff;
  border:1px solid #aaa;
}
#first_tab{
  height: 100%;
  overflow: hidden;
}
#scrolldiv{
  overflow-y:auto;
  height:100%;
}
.korpus{
  max-height:100%;
 }
.korpus > div, 
.korpus > input { 
  display: none;
}
.korpus label {
  padding: 5px;
  border: 1px solid #aaa;
  line-height: 27px;
  cursor: pointer;
  position: relative;
  bottom: 1px;
  background: #fff;
}
.korpus input[type="radio"]:checked + label {
  border-bottom: 2px solid #fff;
}
.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2) {
  display: block;
  padding: 5px;
  border: 1px solid #aaa;
}
代码语言：javascript
复制
<div id="Site" class="Flx FlxCol">
    <header>
      <h1>This is the Header</h1>
      <ul id="Lst1" class="Flx">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
      <ul class="Flx">
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
    </header>

    <div id="MainWrap" class="Flx Flx1">
      <aside class="Flx FlxCol">
        <div id="tabs" class="korpus">
          <input type="radio" name="one" checked="checked" id="vkl1" />
          <label for="vkl1">Tab A</label>
          <input type="radio" name="one" id="vkl2" />
          <label for="vkl2">Tab B</label><input type="radio" name="one" id="vkl3" />

          <div id="first_tab" class="tab Flx Flx1 FlxCol">
            <div>
              <a href="#ln1">Ln1</a>
              <a href="#ln2">Ln2</a>
              <a href="#ln3">Ln3</a>
            </div>
            <div id="scrolldiv" class="Flx1">
              <span><a>one</a></span><br>
              <span><a>two</a></span><br>
              <span><a>three</a></span><br>
              <span><a name="ln1">1. Link1</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a name="ln2">2. Link2</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a name="ln3">3. Link3</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
              <span><a>and more</a></span><br>
            </div>
            <!-- SCROLL DIV ENDS -->
          </div>
          <!-- FIRST TAB ENDS -->
          <div id="second_tab" class="tab">
            <!-- SECOND TAB -->
            Some more stuff here
          </div>
        </div>
        <!-- SECOND TAB ENDS -->
      </aside>

      <section id="main" class="Flx1">
        Some general text here
      </section>
    </div>
  </div>

​

学习FLEX

关键组件在我上面回答的类Flx和Flx1中设置。display:flex告诉所有的孩子来填充可用的空间。flex:1告诉孩子要占用多少空间。这里是一个很好的地方来测试flex能做什么。

Flexbox操场

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/43320541

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档