試圖在HTML獲取特定的佈局與CSS

這是我的情景：試圖在HTML獲取特定的佈局與CSS

我有一個固定的定位DIV元素（可以稱之爲「包裝」）。它不能從窗口邊緣溢出100px的邊距。

這個div裏面還有其他3個DIV（'first'，'second'和'third'）。

只有'第三'DIV有一個固定的高度，並且應該總是位於包含'wrap'DIV的底部。

問題是我想讓'包裹'DIV佔據儘可能少的屏幕高度。如果「第一」和「第二」完全顯示，我希望它縮小高度，如果不顯示，請滾動「第二」。

我覺得很難解釋，所以我希望你能明白。如果您需要任何澄清，請向我提問。

我在CodePen上爲它創建了一支筆，您可以隨意使用它。

我無法成功實現這個沒有JS。

我真的很感謝你的幫助... 謝謝。

來源

2013-05-09 nir.arazi

您可以在樣式表中使用@media像

@media screen and (max-width: 800px) { 
    #wrapper { 
    width: 90%; 
    min-width: 0; 
    } 
    #column-main { 
    margin-left: 0; 
    } 
    #column-sidebar { 
    width: auto; 
    float: none; 
    } 
}

訪問here一個更好的解釋不同的屏幕尺寸創建自定義樣式。

來源

2013-05-09 14:19:51

並且在媒體查詢中，可能會調整元素的寬度，例如將列表項設置爲寬度爲100％，這樣它們可以在整個窗口中延伸。在您的媒體查詢中，您可能需要引用父選擇器來修改當前選擇器，即#wrapper ul {...} – blackhawk 2013-05-09 14:22:13

@Antarr：非常感謝您的回答。我知道媒體查詢。問題不在於寬度變化。 'second'DIV包含具有不同高度的表單，並且我希望它影響'wrap'的高度，並且始終不會在底部邊距之外流動。 – 2013-05-09 15:00:58

@ nir.arazi對於你的包裝，你有底部設置爲自動使用'底部：5px;}'騎，或者你想要什麼尺寸的邊距？ – 2013-05-09 15:06:55

試圖在HTML獲取特定的佈局與CSS

回答

相關問題