不同屏幕分辨率的嵌套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的高度

回答

相關問題