「100％」的DIV寬度在頁面右端滾動

我有一個非常簡單的佈局，帶有2個DIVS：一個固定寬度的左側欄和一個右側區域，佔據剩餘寬度的100％。兩者都是100％的高度，如果高度高於窗口高度，我希望正確的項目具有垂直滾動條。「100％」的DIV寬度在頁面右端滾動

我的當前代碼佔用了整個瀏覽器窗口，但右側的區域從右側的瀏覽器可查看區域滾動，並且從來沒有可見的垂直滾動條。

HTML：

<body> 
    <form id="Form2" runat="server"> 
     <div class="page"> 
      <div class="clear hideSkiplink"> 
       Left side stuff goes here.... 
      </div> 
      <div class="main"> 
       Right size stuff goes here.... 
      </div> 
     </div> 
    </form> 
</body>

CSS：

div.hideSkiplink 
{ 
    padding:20px; 
    background-color:#990000; 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:249px; 
    height:100%; 
} 
div.main 
{ 
    padding: 10px; 
    margin: 0px; 
    background-color: #000000; 
    color: #ffffff; 
    position: fixed; 
    top: 0px; 
    left: 250px; 
    width: 100%; 
    height: 100%; 
}

來源

2011-06-06 pearcewg

我主要工作，感謝您的意見！我仍然希望能夠有機會獲得DIV禪師的幫助，讓我走出去......行爲有時候會很奇怪！ – pearcewg 2011-06-08 22:18:51

當你給的東西width:100%這意味着 '無論我的容器的寬度，我將具有相同的寬度' - 這並不意味着'我將佔用100％的可用空間'

換句話說，假設您的父母DIV的寬度爲300像素 - 如果您給孩子div width: 100% ，它將是300像素的100％。

你可以在這裏做什麼，因爲你的左列是固定的寬度，是向右分區添加左邊距。

div.left 
{ 
    width: 249px; 
} 

div.right 
{ 
    width: 100%; 
    margin-left: 249px; 
}

來源

2011-06-06 20:03:34 KOGI

另外值得注意的是寬度意味着內容寬度。它從那開始，然後爲它添加填充，邊框和邊距。所以即使你在頁面上有一個100％的div，如果有任何填充，它仍然會滾動屏幕。 – gtd 2011-06-06 20:04:57

@gtd是100％正確的。然而，你可以通過使用CSS的'box-sizing：border-box;'規則來解決這個問題。不過，[支持尚未滿]（http://caniuse.com/#search=box-sizing） – KOGI 2014-02-06 22:53:25

而是具有更廣闊的領域填補空間，爲什麼不只是做絕對定位的左邊欄和主要內容<div>填充了整個頁面，用padding-left在內容轉移？

來源

2011-06-06 20:05:17 Blender

寬度爲100％的div將填充它所在的容器。您的容器是頁面寬度的100％。它沒有考慮到你將它向右移動了250px，並且具有絕對定位。

你最好的選擇：

.hideskiplink應該來的流量。主要後。浮動.hideskiplink到左邊，給它一個寬度，然後給.main一個margin-left匹配.hideskiplink的寬度。

來源

2011-06-06 20:07:28

某些時候，您需要將CSS中正文中的頁邊距設置爲0.

EG。

body {background-color:#000; margin-left:0px;}

默認情況下，某些瀏覽器在左側有幾個像素填充。

來源

2012-10-11 05:49:08 user1427806

我已經解決了我的問題，通過將最小寬度設置爲「body」與該div內的內容寬度相同的值。

來源

2015-01-20 21:21:45 Jerome

「100％」的DIV寬度在頁面右端滾動

回答

相關問題