Question

我想设置页面样式，使内容位于中间，左边有一个黄色边框，从页面顶部到底部。

目前我只能使用px或者使用继承来使其停止直到我的数据结束。以下代码无效。

.content{ min-height:100%;}
html{ height:100%;}

完整的代码：

html
{
    font-family: Segoe UI, Verdana, Sans-Serif;
    background-image:url('../Images/tile.jpeg');         
}

.content
{ 
    width:700px;
    margin:auto;
    padding-left:5px;    
    background-color:White;
}

.button
{
    font-family: Segoe UI, Verdana, Sans-Serif;
    height: 25px;
    width: 160px;
}

如何让它运行到整个页面的底部？

谢谢！

Answer 1

使用背景图像的背景图像
研究“全高css”并查看http://peterned.home.xs4all.nl/examples/csslayout1.html

Answer 2

根据您所需的浏览器支持，您只需将min-height:100%;添加到内容div即可。

如果您不介意使用JavaScript，如果内容容器的高度小于窗口的高度，您还可以添加一个简单的代码段来设置height:100%;。

JQuery：

$(function(){
    if($('#content').height() < $(window).height())
    {
        $('#content').css('height','100%');
    }
});

演示：http://jsfiddle.net/gBtTf/

Answer 3

使用CSS试试这个

<style type="text/css">
#blah{
    border-left-width:Xpx;
    border-left-color:#xxx;
    HERE add all the code for
    content
    }
</style>

其中blah是你的div，段落标签等的id，你必须自定义宽度和颜色。

编辑编辑了css，尝试此操作，但不是为边框创建div，而是将其添加到内容div，其高度应为100％或最小高度100％让我知道它是怎么回事。

Answer 4

有一个被遗忘的div。将div添加到100％高度的CSS和BAM！

如何让左边框运行到页面结尾？

4 个答案: