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

我有一个嵌套DIV的网页。我的问题是，如何确保它们中的一个（id = first_tab，second_tab）将填充其父级（id = div_korpus）的空间，因此它在所有屏幕分辨率和浏览器中都相同。（我指的是围绕左侧面板的线）。不同屏幕分辨率的嵌套div结构中div的高度

目前我使用“em”单位来衡量它们的高度，这是最好的工作方式，但它在较高的屏幕分辨率下（它可能会有很多空间）感觉不到整个父元素。我尝试使用一个视口单元（“vh”），但它给出了类似的效果，当点击链接Ln1，Ln2，Ln3时，它也向上移动整个左侧面板。

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

https://jsfiddle.net/crfpp0jn/

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; 
 
}

<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>

来源

2017-04-10 user1274925

你获得与flex-box程序！

我不得不放弃你写的以上，并从头开始，但这是我建议你头的方向。

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

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; 
 
}

<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 playground

来源

2017-04-10 11:21:14 Obsidian

谢谢！我只是不太了解CSS Flex。这个规范的关键部分是什么使得一个元素遍布父级，是这样的：-webkit-box-orient：vertical; flex-direction：列; – user1274925

谢谢！我的任务是修复页面头部和底部之间的“div_korpus”的高度，并在其子元素“first_tab”中提供滚动。什么Flex财产可以做到这一点？ – user1274925

太好了，现在我明白了。顺便说一句，现在我试图将这个元素与选项卡（“korpus”）合并到此代码中，但其边界不会出现（我将背景改为白色并添加了3px的填充）。与你的风格部分有冲突吗？ – user1274925

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

回答

相关问题