Question

我的网页基本布局存在一些问题。我想要的是以下内容：标题，然后页面的内容，左侧是菜单，右侧是内容，还有页脚。在内容和菜单都不超过页面长度的情况下，该页脚应位于页面的底部，两个内容div都延伸到页眉。如果内容超过页面长度，因此显示了滚动条，则页脚应位于内容的底部。

我目前拥有的是内容的标题和两列，使用this page在相同的高度。页脚当前位于页面底部，但当内容超出页面长度时，它会保留在页面中。

这是当前的代码：

的CSS：

 html, body{
    margin:0px;
    height:100%;
}
#container{
    height:100%;
    width:1024px;
    margin:auto;
}
#header{
    width:100%;
    height:100px;
    background:purple;
}
#container2{
    float:left;
    width:1024px;
    background:yellow;
    overflow:hidden;
    position:relative;
}
#container1{
    float:left;
    width:1024px;
    background:red;
    position:relative;
    right:874px;
}
#col1{
    float:left;
    width:150px;
    position:relative;
    left:874px;
    overflow:hidden;
}
#col2{
    float:left;
    width:874px;
    position:relative;
    left:874px;
    overflow:hidden;
}
#footer{
    width:1024px;
    background:purple;
    position:absolute;
    bottom:0px;
    height:30px;
}

HTML：

<body>
    <div id='container'>
        <div id='header'>
            This is the header.
        </div>
        <div id='container2'>
            <div id='container1'>
                <div id='col1'>
                    Menu option 1<br />
                    Menu option 2<br />
                    Menu option 3<br />
                    Menu option 4<br />
                    ...
                </div>
                <div id='col2'>
                    Content!<br />
                    Content!<br />
                    Content!<br />
                    Content!<br />
                    Content!
                </div>
            </div>
        </div>
        <div id='footer'>
            This is the footer.
        </div>
    </div>
</body>

当然，这是小提琴：http://jsfiddle.net/gVEpx/

编辑：要完全清楚，页脚应该是： 1）如果内容小：位于页面底部（无滚动条） 2）如果内容大：在内容的底部，那么当您滚动到页面底部时，您只能看到页脚。

编辑2：没有明确提到两列应该一直跟随页脚。我希望在其中一个列上有一个边框，并且该边框需要贯穿整个页面，从页眉到页脚。

编辑3：以下是两张精彩的图片，以便澄清：Small content http://i49.tinypic.com/14bjdya.png和big content http://i50.tinypic.com/xda3y0.png。

Answer 1

看看这个fiddle 中间部分设置为min-height: 100%，然后我们使用padding: 100px 0; margin: -100px 0为页眉和页脚添加位置。我们使用box-sizing: border-box来改变页面的整体高度。即使内容不足，我们也会使用padding-bottom: 9999px; margin-bottom: -9999px将内容扩展到页脚。
如果要垂直居中页眉和页脚，可以将line-height设置为height。如果内容将超过一行，则可以嵌套另一个div并使用display: table-cell; vertical-align: middle;：

的 HTML

<div id="header" class="vcenter"> <div> Header </div> </div> ... <div id="footer" class="vcenter"> <div> Footer </div> </div>

<强> CSS

.vcenter { display: table; } .vcenter > * { display: table-cell; vertical-align: middle; }

Answer 2

这些是我过去为最近的项目执行此操作的资源：

css anchor div to foot of page http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/

总之，你设置一个容器元素，其中包含除页脚之外的所有内容height: 100%.然后你给页脚一个高度并在页面上加margin-bottom: [footer height]。我在容器的最后一个元素上抛出padding-bottom而不是使用单独的div。请参阅http://cureholidayitis.com。

如果我误解了这个问题，请告诉我。

Answer 3

我使用jquery为页脚元素添加了一个条件类，基本上合并了https://stackoverflow.com/a/2146903/1804496的答案，以便与你的jsfiddle一起工作。

http://jsfiddle.net/gVEpx/7/

$(function() {
   // Check if body height is higher than window height :)
   if ($("body").height() < $(window).height()) {
      $("#footer").addClass('noOverflowFooter');
   }
});

这是另一个例子，但没有任何jQuery

http://jsfiddle.net/gVEpx/8/

// Body Height
bodyH = document.body.offsetHeight;
// Window Height
windowH = window.innerHeight;
// Footer element
footer = document.getElementById("footer");
// Check if body height is higher than window height :)
if (bodyH < windowH) {
   // add to the Class attribute of the footer element
   footer.className += " noOverflowFooter";
}

Answer 4

不确定这是否是你想要的？ JSFIDDLE

我刚刚将#container2 div修改为相对于#container div的高度并指定了overflow:auto

Answer 5

我认为这就是你要找的东西

http://jsfiddle.net/pr9XJ/1/

HTML：

<body>
        <div id='container'>
            <div id='header'>
                This is the header.
            </div>
            <div id='container2'>
                <div id='container1'>
                    <div id='col1'>
                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />
                    </div>
                    <div id='col2'>
                        Content!<br />
                        Content!
                    </div>
                </div>
            </div>
        </div>
        <div id='footer'>
            This is the footer.
        </div>
    </body>

CSS：

html, body
{
    margin: 0px;
    height: 100%;
}
#container
{
    height: auto;
    min-height: 100%;
    width: 1024px;
    margin: auto;
    overflow: auto;
}
#header
{
    width: 100%;
    height: 100px;
    background: purple;
}
#container2
{
    height: 100%;
    width: 1024px;
    background: yellow;
    overflow: auto;
}
#container1
{
    padding-bottom: 32px;
    overflow: auto;
}

#col1
{
    height: 100%;
    float: left;
    width: 150px;
    background: red;
    overflow: auto;
}
#col2
{
    height: 100%;
    float: left;
    width: 874px;
    overflow: auto;
}
#footer
{
    width: 1024px;
    background: purple;
    height: 32px;
    margin-top: -32px;
    clear: both;
    position: relative;
}

Css样式布局问题

5 个答案: