Css位置：固定代碼打破divs位置

我有一個簡單的HTML頁面，它包含兩個垂直對齊的div。該頁面因第二個div而可滾動。我希望第一個div的位置是固定的或不可滾動的，這樣只有第二個div是可滾動的。我加position:fixed到第一個div的css，但這次，第二個div被放在第一個div，所以第一個div在第二個div下消失。Css位置：固定代碼打破divs位置

CSS

body { 
    width:1000px; 
    height:100%; 
    margin:0 auto;/*body ortalama*/ 
} 

#div1 { 
    height:300px; 
    background-color:#00CC66; 
} 

#div2 { 
    display:block; 
    word-wrap:break-word; 
    padding:30px; 
    font-size:72px; 
    background-color:#FF3; 
}

HTML

<div> 
    <div id="div1"></div> 
    <div id="div2"> 
    <p> 
     <!--Content Here--> 
    </p> 
    </div> 
</div>

來源

2013-03-30 Sedat KURT

你可以指定'＃div1'的寬度？ –

你的意思是你想添加一個滾動條到第二個div嗎？ – Omega

我認爲他希望div1保持不變，頁面的其餘部分根據需要進行滾動。 –

這個CSS添加到#div2（你需要指定一個高度#div2否則，滾動條將不知道從哪裏開始）：

overflow-y:auto; 
    height:50px;

請看這裏的例子：http://jsfiddle.net/38xkn/1/（scroll t如果您將body的寬度設置爲100px，則右邊第一個，然後您會看到滾動條#div2）。

來源

2013-03-30 16:21:14 Omega

但我不知道div2的高度，因爲div2的高度可以根據其內容而改變。所以內在的內容是動態的 –

如果你喜歡，你可以添加'max-height：50px;'。這樣，如果高度超過50px，那麼它會顯示滾動條。只需將50px更改爲所需的最大高度即可。 http://jsfiddle.net/38xkn/2/ – Omega

好吧，它有點好一點，但我想所有頁面的滾動條，這個滾動條必須滾動div2。謝謝努力 –

您應該添加一個高度並設置自動溢出而不是滾動，因爲使用滾動，即使內容小於指定高度，滾動條也會始終存在。例如：

#div2 { 
    background-color: #FFFF33; 
    display: block; 
    font-size: 72px; 
    height: 200px; 
    overflow: auto; 
    padding: 30px; 
    word-wrap: break-word; 
}

來源

2013-03-30 16:24:40 Sandro

嗯，但div2的高度可以改變取決於它的內容。所以內部的內容是動態的。可以解決沒有分配固定高度？ –

固定總是相對於父窗口，從來沒有一個元素。一旦位置設置爲固定，則將其從文檔流中取出。

固定定位是絕對定位的子類別。唯一的區別是，對於固定位置的框，包含塊由視口建立。

所以在第二DIV2添加這些

position:relative; 
top:300px; /*Bump it down by the height of div1;*/

希望它能幫助;

來源

2013-03-30 16:25:06 GeekyCoder

好的，這裏是另一種選擇。它的佈局有些不同，但它應該完成工作。它使用div1上的絕對定位到頂部，並使用百分比寬度來阻止它覆蓋div2的滾動條。這並不完美，所以你可能需要稍微微調一下。

HTML

<body> 
<div> 
    <div id="div1">a</div> 
    <div id="div2"> 
    <p>        SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDDAMSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p> 
</div> 
</div> 

</body>

CSS：

body{ 
    width:100%; 
    height:100%; 
    margin:0 auto;/*body ortalama*/ 
overflow:hidden; 
} 

#div1{ 
    height:300px; 
    background-color:#00CC66; 
position:absolute; 
top:0; 
width:97.5%; 
} 

#div2{ 
    display:block; 
    word-wrap:break-word; 
    padding:30px; 
    font-size:72px; 
    background-color:#FF3; 
    overflow-y:auto; 
    max-height:50px; 

    padding-top:300px; 
    }

例： http://jsfiddle.net/38xkn/6/

來源

2013-03-30 17:23:04 Omega

Css位置：固定代碼打破divs位置

回答

相關問題