Question

我的min-height和height属性有问题。

当内容大于100％时，蓝色列不会持续到页面结尾。（全屏）

HTML

    <div id="wrapper">
        <section id="sidebar">
        test
        </section>
        <section  class="contentViewer">
             content goes here
        </section>

    </div>

CSS

body, html {
height:100%;
}

#wrapper {
width:100%;
height:100%;
}

section#sidebar {
float:left;
width:300px;
min-height:100%;
height: auto !important;
margin: auto;
background-color: blue;
overflow: hidden;
}

section.contentViewer {
height:auto;
position:absolute;
top:0;
right:0;
left:300px;
font-family: "brandon";
font-size:18pt;
}

我已经尝试谷歌了，但我找不到适合这个问题的答案。有人熟悉这个问题并且知道正确的解决方案吗？

提前致谢

尼克

Answer 1

编辑（再次哈哈）

您必须避免浮动和绝对定位，因为您的父母不会与绝对定位的子元素一起缩放。因为它们不会缩放，所以默认为100％。我建议使用表结构（左列，右列，垂直对齐顶部宽度：100％等）

body, html, #wrapper { height: 100%; } /* defaults to 100% height */
#wrapper { display: table; }
#wrapper > * { display: table-cell; vertical-align: top; height: 100%; } /* Behave as tablecells */
#sidebar { background-color: blue; min-width: 200px; } /* min-width is important since other cell is 100% */
.contentViewer { background-color: red; width: 100%; } /* Fill up remaining space */
.container { position: relative; height: 100%; width: 100%; } /* Use containers for relative positioning '*/


<div id="wrapper">
  <section id="sidebar">
    <div class="container">
      <p>Left side</p>
    </div>
  </section>
  <section  class="contentViewer">
    <div class="container">
      <p>Yoopie</p>
    </div>
  </section>
</div>

上面的代码是我使用css表进行2列布局的基本结构。它允许流体设计，同时仍然能够使用相对定位。 Normaly table-cells不支持position：relative;所以我总是使用.container div作为表格单元格的直接子元素

最小高度100％伸展

1 个答案: