左圖沒有采取充分的高度，雖然規定高度100％

下面是我的窗口形象的一個屏幕截圖滾動窗口 screenshot 左圖沒有采取充分的高度，雖然規定高度100％

我給的45像素高度，我的頭和主體部分後，現在用柔性。主要部分內有左側和右側部分。每當我最小化或最大化我的窗口時，我都希望我的左側部分能夠達到全屏高度。

這是我的頁面在滾動時的外觀。左側面板沒有得到與滾動調整，雖然我已經給的100％

HTML

<body> 
    <header></header> 
    <div class="main-section"> 
    <div class="left-section"></div> 
    <div class="right-section"></div> 
    </div> 
</body>

CSS

body { 
    min-height: 100%; 
    width: 100%; 
    overflow: auto; 
    display: flex; 
    flex-direction: column; 
} 
header { 
    height: 45px; 
    width: 100%; 
    overflow: hidden; 
    display: block; 
} 
.main-section { 
    width: 100%; 
    position: relative; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    flex-grow: 1; 
    overflow: auto; 
} 
.left-section { 
    position: absolute; 
    width: 200px; 
    height: 100%; 
}

來源

2016-05-15 Khyati

你能發佈完整的代碼嗎？ – AVI

JokerFan我已經嵌入了代碼 – Khyati

您分享的代碼不足以複製屏幕截圖...您是什麼意思*「左側面板無法通過滾動進行調整」* - 應該如何調整？即使在滾動時，你是否希望它保持在屏幕的相同位置？ –

問題高度 -

height : 100%

它是指父元素（.main-section）的高度，然後將元素的高度（.left-section）設置爲100％。如果父元素的高度沒有設置爲任何值，那麼瀏覽器沒有任何可引用的東西。

解決方法 - 設置.main-section的高度，然後.left-section將佔用其高度。

希望這有助於！

來源

2016-06-08 13:27:41 typhon

左圖沒有采取充分的高度，雖然規定高度100％

回答

相關問題