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

标签 html css

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

目前我使用“em”单位来测量它们的高度，这种方式效果最好，但在更高的屏幕分辨率下感觉不到整个父元素(它下面可能有很多空间)。我尝试使用视口(viewport)单位(“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>

最佳答案

你得到 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>

学习灵 active

在我上面的回答中，关键组件设置在类 Flx 和 Flx1 中。 display:flex 告诉它的所有 child 填充可用空间。 flex:1 告诉 child 占用空间的比例。 这里是测试 flex 功能的好地方。

Flexbox playground

关于html - 不同屏幕分辨率下嵌套div结构中div的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43320541/

上一篇：查询 : Is it possible to make customized menu using devexpress?

下一篇：Javascript - 函数取决于其他函数的结果

相关文章：

jquery - 突出显示当前页面的两级水平菜单

javascript - 单击时显示和隐藏选项卡内容

html - firefox 样式输入 :file. 大小属性不起作用

html - 从 li 元素中删除空格

javascript - 如何使用JavaScript检测html中是否同时按下多个键

html - body 不透明度影响整个页面？

html - 垂直移动 <hr>

html - 如何将一个元素与其他三个元素居中并使它们响应？

javascript - 使元素粘在屏幕底部

jquery - 在 jQuery 中淡出元素并在其余部分滑动

©2024 IT工具网  联系我们