設置溢出：自動與高度100％

在我的頁面中，我有一個基於其父項的高度爲100％的元素;不過，我希望這個元素在必要時自動垂直滾動。這是my example。設置溢出：自動與高度100％

我做不到。

我加入下面的CSS：

height:100%; 
max-height:100%;

其實，我要的是確保該.content總是.container內。就像這樣：

pic.

（順便說一句，上面的圖片中，我使用的應該，因爲它的最大高度應根據的.container高度來避免max-height:400px）

任何想法？

來源

2013-01-09 hguser

這是接近你正在尋找的解決方案，雖然你可能需要調整填充和這樣一個更美觀的外觀：http://jsfiddle.net/GJ5yM/

新建CSS：

.content{ 
     height:100%; 
     position: absolute; 
    } 
    .windowcontent{ 
     background-color: white; 
     padding: 10px; 
     max-height:100%; 
     position:relative; 
     overflow-y:auto; 
    }

來源

2013-01-09 05:57:00

我不想將'height：100％'設置爲'.content'，因爲我想讓'.content'的大小根據其中的內容進行調整。然後在你的例子中，'.content'總是佔據整個高度。 – hguser

我發現了一個應該可以工作的解決方案，請參閱：http://jsfiddle.net/RL6EM/ –

事實上，在發佈此問題之前，我已嘗試過您的解決方案，但是我想''.windowContent'滾動而不是'。內容' – hguser

看看這個小提琴。 http://jsfiddle.net/siyakunde/qng67/1/ 這是你想要的？

我已經給

max-height:100%; 
overflow:scroll;

內容。

來源

2013-01-09 06:27:58 I29

希望這是你在找什麼：

http://jsfiddle.net/CjV6k/1/

的CSS：

#scrollFrameWrap { 
    width: 400px; 
    margin: 20px auto; 
    background: #000; 
    border-radius: 8px; 
    box-shadow: 0px 1px 15px 0 #fff inset; 
    padding: 3px 10px 10px; 
} 
.title { 
    text-align: center; 
    font-size: 12px; 
    color: #aaa; 
} 
#parentElement { 
    height: 150px; 
    padding-bottom: 10px; 
    margin-bottom:10px; 
} 
#scrollFrame { 
    width: 380px; 
    height: 100%; 
    overflow: scroll; 
    overflow-x: hidden; 
    background: #fff; 
    border-radius: 4px; 
    padding: 10px; 
}

的HTML：

<div id="scrollFrameWrap"> 
    <p class="title">Title</p> 
    <div id="parentElement"> 
    <div id="scrollFrame"> 
     <p>This is a sentence, hope you like it.</p> 
     <p>This is a sentence, hope you like it.</p> 
     <p>This is a sentence, hope you like it.</p> 
     <p>This is a sentence, hope you like it.</p> 
     <p>This is a sentence, hope you like it.</p> 
     <p>This is a sentence, hope you like it.</p> 
     <p>This is a sentence, hope you like it.</p> 
     <p>This is a sentence, hope you like it.</p> 
     <p>This is a sentence, hope you like it.</p> 
     <p>This is a sentence, hope you like it.</p> 
    </div> 
    </div> 
</div>

看看是否有幫助

來源

2013-01-09 06:54:20 hdavis84

與我的文章不一樣，因爲'scrollFrameWrap'應該有一個固定的高度（這將被改變） – hguser

只設置

overflow-y: scroll;

並設置任何你想要的高度。

來源

2013-01-09 07:16:22

設置溢出：自動與高度100％

回答

相關問題