2015-07-10 61 views
0

我有一個側面菜單,需要至少500px的高度。但是它也需要一路走向底部。將絕對定位元素的最小高度值設爲較大值?

在監視器有空間的屏幕上,mh100%正常工作。但是,如果沒有其他內容,則在移動設備上,菜單會被修剪。

如果我設置固定值,那麼在大屏幕上它不會一直擴展到底部。

我可以用兩個div,父母與minh100%和固定高度的孩子這樣父母就會有一個背景顏色,似乎讓菜單擴展

,但想知道如果存在沒有按另一種方式不要求我只爲了視覺目的而混淆html。

回答

1

除非我沒有完全理解你在找什麼,否則它應該很容易。

編輯:我錯過了你的問題的絕對位置的一部分,但它沒有太大的不同:

<nav> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
</nav> 
<main> 
    <h1>Page</h1> 
    <p>Content.</p> 
    <p>Content.</p> 
    <p>Content.</p> 
    <p>Content.</p> 
    <p>Content.</p> 
</main> 

<style type="text/css"> 
    html,body { 
    margin:0; 
    height:100%; 
    width:100%; 
    } 

    nav { 
    position:absolute; 
    min-height:500px; 
    height:100%; 
    background:#ccc; 
    width:30%; 
    } 

    main { 
    width:60%; 
    padding:0 5%; 
    float:right; 
    } 
</style> 

Here's the fiddle

相關問題