Question

我有一个嵌套DIV的网页。我的问题是，如何确保其中一个（id = first_tab，second_tab）将填充其父级空间（id = div_korpus），因此它在所有屏幕分辨率和浏览器中看起来都是一样的。（我指的是左侧面板周围的线条。）

目前我使用＆＃34; em＆＃34;测量高度的单位，最有效，但它不会在更高的屏幕分辨率下感受整个父元素（下面可能有很多空间）。我尝试使用视口单元（＆＃34; vh＆＃34;），但它产生了类似的效果，当点击链接Ln1，Ln2，Ln3时也向上移动整个左侧面板。

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

https://jsfiddle.net/crfpp0jn/

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用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>

学习灵活

在上面的答案中，关键组件在类Flx和Flx1中设置。 display:flex告诉所有孩子填充可用空间。 flex:1告诉孩子占用的空间比例。这是一个测试flex可以做什么的好地方。

Flexbox playground

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

1 个答案: