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）

回答

相關問題