顯示整個div沒有滾動條 - flexbox

我正在建立一個單頁網站，並希望每個部分有一個100％的最低高度。雖然這是有效的，但如果一個div的內容多於容器div沒有擴展以適應內容，那麼留給我一個醜陋的滾動條。顯示整個div沒有滾動條 - flexbox

HTML

<div id="general"> 
<div id="home"> 
<main> 
    <div class="main" id="home_main"> 
    <h1 id="head_home">/NAME GOES HERE</h1> 
    <h3 id="tag_home">Funky tagline here</h3> 
    </div> 
</main> 
</div> 
<div id="about"> 
<main> 
    <div class="main"> 
    <h1 id="head_about">About</h1> 
<p id="para_about">Hide at bottom of staircase to trip human find something else more interesting paw at beetle and eat it before it gets away, rub whiskers on bare skin act innocent. Kitty loves pigs eat from dog's food missing until dinner time, and spend all night ensuring people don't sleep sleep all day or where is my slave? I'm getting</p> 
</div> 
</main> 
</div>

CSS

#general { 
    width: 100%; 
    min-height: 100vh !important; 
    height: 100%; 
    position: absolute; 
    right: 0; 
    z-index: -200; 
} 

#home { 
    min-height: 100VH; 
    background: yellow; 
} 

#about { 
    min-height: 100vh; 
    background: blue; 
} 

main { 
    height: 100vh; 
    width: 90%; 
    min-height: 100% !important; 
    margin: 0 auto; 
    padding: 20px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    resize: both; 
    overflow: auto; 
    border: 3px solid black; 
} 

.main { 
    width: 80%; 
    padding: 40px; 
    resize: both; 
    overflow: visible; 
    text-align: center; 
}

這是我工作的jsfiddle至今：https://jsfiddle.net/chris2001/jqwqxL6n/1/

謝謝大家的幫助:)

來源

2016-12-01 Christa

切換您height和min-height定義，以便main被告知要100％的高和至少 100vh：

main { 
    /* height: 100vh; min-height: 100% !important; */ 
    height:100%; min-height: 100vh; 
    ... 
}

EG：https://jsfiddle.net/jqwqxL6n/3/

來源

2016-12-01 17:06:23 Moob

隨着'最小高度：100vh'，我認爲不需要'身高：100％'。我認爲'min-height：100vh'就是需要的。 –

基本上你可以使用你的#main: overflow-y: hidden;它會解決你的問題隱藏滾動條，但它也會刪除顯然滾動選項。所以，一些文本將無法訪問。
我建議，使該地區，其中文本放置，做大..

來源

2016-12-01 17:00:44

我希望文本可以到達，但滾動被刪除:)頂多我想讀更多的按鈕，但一旦點擊，我不想滾動。 – Christa

應用在主div的CSS方式離開高度元素

display:block; 
overflow:auto;

雖然你可能並不需要，但仍對一些瀏覽器渲染HTML，你可以添加此position: relative

來源

2016-12-01 17:07:31

另請嘗試[Tom Spee answer]（http://stackoverflow.com/a/22682311/5588347）中的鏈接。 –

顯示整個div沒有滾動條 - flexbox

回答

相關問題