2015-01-06 67 views
-3

我已經把我的article元素的90%一個max-height DIV成爲滾動的,但如果裏面的內容大小超出此值繼續流過並低於我的footermake如果內容的增長超過最大高度

有沒有一種方法可以使#libraries變得可滾動,如果它變滿了內容?所以內容不會超出我的footer

http://jsfiddle.net/bobbyrne01/oyrvbh23/1/

html

<div id="libraryView"> 
    <article id="libraries">Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/>Test 
     <br/> 
    </article> 
    <footer> 
     <button id="libraryAdd">Add</button> 
     <button id="libraryBack">Back</button> 
    </footer> 
</div> 

css

html, body { 
    height: 98%; 
} 
#libraries { 
    background-color: #E6E6E6; 
    max-height: 90%; 
} 
#libraryView { 
    background-color: #A6A6A6; 
    height: 100%; 
} 

screenshot

+1

'overflow:auto' – melancia

+0

我要去-1因爲你可以很容易地把你的問題放入Google並找到答案。在這裏展示一些研究成果。 – philtune

回答

1

使用OVERFLOW財產這樣overflow:auto您的容器上:

html, 
 
body { 
 
    height: 98%; 
 
} 
 
#libraries { 
 
    background-color: #E6E6E6; 
 
    max-height: 90%; 
 
    overflow: auto; 
 
} 
 
#libraryView { 
 
    background-color: #A6A6A6; 
 
    height: 100%; 
 
}
<div id="libraryView"> 
 
    <article id="libraries">Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/> 
 
    </article> 
 
    <footer> 
 
    <button id="libraryAdd">Add</button> 
 
    <button id="libraryBack">Back</button> 
 
    </footer> 
 
</div>

http://jsfiddle.net/oyrvbh23/2/

1

一種解決方案是使用overflow: auto;到元素與ID #libraries

html, 
 
body { 
 
    height: 98%; 
 
} 
 
#libraries { 
 
    background-color: #E6E6E6; 
 
    max-height: 90%; 
 
    overflow: auto; 
 
} 
 
#libraryView { 
 
    background-color: #A6A6A6; 
 
    height: 100%; 
 
}
<div id="libraryView"> 
 
    <article id="libraries">Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/>Test 
 
    <br/> 
 
    </article> 
 
    <footer> 
 
    <button id="libraryAdd">Add</button> 
 
    <button id="libraryBack">Back</button> 
 
    </footer> 
 
</div>

相關問題