CSS - 使用div填充页面（horzonal）

我正在构建一个网站，其中主要内容框架应该跨越页面的整个宽度，以及尽可能多的高度，并且具有最小高度（为了包含浮动“侧边栏”）。但是，将div元素的宽度设置为100％并不能填满窗口，它会对其填充，从而创建一个水平滚动条。有没有什么办法可以将内容div拉伸到页面的整个宽度，并且不会从侧面或底部剪切，就像使用框大小或溢出设置一样？CSS - 使用div填充页面（horzonal）

谢谢您的时间，蒂莫西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>

来源

2011-12-04 Timothy S.

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

你的问题是为什么我采取最低限度的CSS方法的一个完美的例子。只有在确定需要时才应用样式。这样，当你的页面没有按你期望的方式显示时，你就不需要调试。

来源

2011-12-04 07:05:16 gilly3

啊，非常感谢 - 现在做了一些修整。 –

元素的宽度不包括边界，保证金，和填充。所以它实际上将宽度设置为100％+其他所有内容（填充时为20px，剩余20px等）。你的部门已经是块级的了，它并没有出现你正在移除的状态，所以你应该完全删除宽度作为块级元素，默认情况下，已经扩大到尽可能多的宽度（并且会不包括填充和其他东西）。

此外，如果您的部门打算扩展到整个页面宽度，则不需要将左右边距设置为auto。

来源

2011-12-04 06:31:19 animuson

谢谢你的解释。我甚至没有考虑过其他的盒子模型.... 好点与第二位以及;我最初尝试了一种居中布局，并决定反对它，似乎我忘了删除那一点。谢谢。 –

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

padding: 20px 0;

另外，从相对位置div.sidebar。摆脱left:20px;

来源

2011-12-04 06:38:18 bookcasey

谢谢你的回答，我没有意识到100％只是指的是内容而不是其他的模型。 –

CSS - 使用div填充页面（horzonal）

回答

相关问题