0

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

http://nickhellemans.be/nick/testing/

当内容大于 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;
}

我已经尝试用谷歌搜索它，但我无法找到适合该问题的答案。熟悉这个问题并知道正确解决方案的人吗？

提前致谢

缺口

4

1 回答 1

0

编辑（再次哈哈）

您将不得不避免浮动和绝对定位，因为您的父母不会与绝对定位的子元素一起缩放。因为它们不随比例缩放，所以它们将默认为 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 列布局的基本结构。它允许流体设计，同时仍然能够使用相对定位。通常表格单元格不支持位置：相对；所以我总是使用 .container div 作为表格单元格的直接子元素

于 2013-01-14T18:45:28.727 回答