Question

我正在建立一个网站，其中主要内容框架应该跨越页面的整个宽度，并且根据需要具有尽可能多的高度，具有最小高度（以便包含各种各样的浮动“侧边栏”）。但是，将div元素的宽度设置为100％不会填充窗口，它会过度填充它，从而创建一个水平滚动条。是否有任何方法可以将内容div拉伸到页面的整个宽度，而不是更多，没有从侧面或底部剪裁，如框尺寸或溢出设置？

感谢您的时间，蒂莫西·S
base.css

html, body {
    margin:0;
    padding:0;

    font-family: "Lucida Grande", Verdana;
    font-size: 0.9em;

    background-color:#4D714D;
    background-image:url("images/titlebar.png");
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position:0px 7px;
}

div.content
{
    position:relative;
    top: 150px;

    padding: 20px;

    margin-left: auto;
    margin-right: auto;

    width:100%;
    min-height:500px;

    background-color:#8BB88B;   
}

div.sidebar
{   
    float:right;

    position:relative;
    top:-20px;
    left:20px;

    width: 400px;
    height: 400px;

    background-color:#FFFFFF;   
}

示例页面

<html>
    <head>
        <title>Login</title>
        <link type="text/css" href="base.css" rel="stylesheet" />       
    </head>

    <body>
        <div class="content">
            <div class="sidebar"></div>
            <form action="loginScript.php" method="post">
                <label>Username:</label>
                <input type="text" name="username" /> <br />
                <label>Password:</label>
                <input type="password" name="password" /> <br />
                <input type="submit" value="Login" name="login" />
            </form>
            <?php print($_GET['msg']) ?>
        </div>
    </body>
</html>

Answer 1

元素的宽度不包括边框，边距和填充。因此它实际上使宽度100％+其他所有（20px右和20px左边用于填充等）。您的除法已经是块级别，并且看起来您没有删除该状态，因此您应该将宽度作为块级元素完全删除，默认情况下，已经展开以尽可能多地填充宽度（并且将会不包括填充和其他东西）。

此外，如果您的分区要扩展到页面的整个宽度，则无需将左右边距设置为auto。

Answer 2

额外的间距来自div.content上的填充。将其更改为：

padding: 20px 0;

另外，从相对定位的div.sidebar开始。摆脱left:20px;

Answer 3

您描述的布局是块元素的默认行为，例如div。它没有以这种方式显示表示您已覆盖默认值。的确，罪魁祸首是width: 100%。您可以安全地从CSS中删除它。

您的问题是我采用极简主义CSS方法的一个完美示例。只有在您确定需要时才应用样式。这样，当您的页面没有按预期方式显示时，您可以减少调试次数。

CSS - 用div填充页面（水平）

3 个答案: