1

我正在尝试使 div 填充整个文档高度，而​​不仅仅是视点高度。当 body、html 和 div 设置 100% 高度时，div 将填充 100% 的视点。但是，当另一个 div 使文档高度超出视点，并且页面滚动时，100% 的高度保持在原始视点高度。

我已经制作了以下 jsfiddle 来演示问题：

http://jsfiddle.net/728CA/1/

抱歉，如果这是一个重复的问题，我已经查看了许多其他问题，但找不到适合我的问题的答案。我是开发响应式网站的新手，非常感谢一些帮助。

CSS：

body, html {
    height:100%;
}

#sidebar {
    height:100%;
    width:100px;
    background:#FF00FF;
    float:left;
}

#content {
    width:200px;
    float:left;
}
.clear {
    clear:both;

html:

<div id="sidebar">
    <nav>
        Links
    </nav>
</div>
<div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id magna iaculis, tincidunt lacus et, gravida sapien. Sed velit metus, congue ac porttitor ut, ornare euismod tortor. Fusce ultricies pulvinar ante, eget facilisis leo rutrum eu. Donec turpis dui, elementum tristique lectus vel, semper posuere nisi. Curabitur at adipiscing lectus. Duis consectetur, urna sit amet feugiat vestibulum, sapien massa facilisis lectus, vitae sagittis augue tellus et augue. Quisque vitae nisi at metus interdum mollis. Vivamus in nisi placerat, rutrum sapien varius, dapibus est. Integer pharetra enim sem, nec porttitor velit suscipit vitae. Ut suscipit, sapien eget placerat congue, justo elit sagittis arcu, a elementum dolor leo a ante. Suspendisse auctor laoreet orci, ut varius est consequat vitae. In eu libero at libero faucibus eleifend et id magna. Vivamus molestie mi eu massa aliquam, sit amet ullamcorper ante semper. Mauris dictum orci id ante porta euismod. Quisque in ultrices sapien. Ut euismod dui ac justo egestas suscipit.

    Integer vitae pretium eros. Suspendisse sapien ipsum, feugiat sed lorem sed, vestibulum lacinia sapien. Proin quis risus at massa lobortis porta. Vestibulum pretium rhoncus dui quis volutpat. Nullam nulla erat, bibendum at mauris et, imperdiet cursus turpis. Cras quis tellus sed urna sagittis rutrum lobortis eu elit. Fusce volutpat venenatis augue a fermentum. Praesent luctus tortor felis, eget varius lacus mattis eu. Aliquam tempor, mi at venenatis ultrices, erat metus mattis risus, id convallis ante mauris quis ipsum. Pellentesque vitae sodales purus. Sed eu faucibus tellus. Nam ultricies lorem enim, vitae vestibulum risus hendrerit ac. Integer condimentum orci in arcu vehicula porta. Ut euismod tincidunt justo, ac feugiat massa. Sed id sollicitudin purus.
</div>
<div class="clear"></div>
4

1 回答 1

1

看我的更新

jsfiddle

我制作了一个粉红色背景的容器，内容为白色背景。

<div id="container">
    <div id="sidebar">
        <nav>
        Links
        </nav>
    </div>
    <div id="content">

    </div>
    <div class="clear"></div>
</div>

CSS

#container {
    min-height:100%;
    background:#FF00FF;
    width: 300px;
}

#sidebar {
    width:100px;
    float:left;
}

#content {
    width:200px;
    float:left;
    background:#FFFFFF;
}
于 2013-08-31T11:04:48.533 回答