当高度无法修复时,使容器中的div可滚动

时间:2013-03-19 18:23:36

标签: html css

我有一个固定高度的容器,它包含一个标题和一个不同内容长度的div,我希望它可以滚动。我知道我可以使这个文本持有div固定高度并设置overflow:auto但这意味着我的标题将受到限制。

目前我有这个:

<html>
<head>
</head>
<body style="background-color: #333;">
<div style="width: 950px; height: 521px; border: 1px solid #000; background-color: #FFCC00; overflow: hidden;">
    <h1>This is a title could be one line or two or three</h1>
    <div style="width: 400px; overflow: auto; margin-bottom: 20px;">
        <p>This div should start below the title and, if it reaches that far, stop 20px short of the bottom of the container div - scrolling if it needs to.</p>
<p>Lorem ipsum wghatever dude ulla nulla, dapibus vel volutpat eget, dignissim et tortor. Mauris erat odio, mattis at ornare quis, imperdiet sed quam. Nam ligula nulla, blandit a pellentesque vel, aliquam et dui. Aliquam mattis nibh id tellus ultrices ac volutpat sapien accumsan. Vivamus volutpat congue metus vitae accumsan. Nulla ultricies mattis est, id vestibulum turpis feugiat sed.</p>
        <p>Suspendisse bibendum scelerisque tincidunt. Duis vel neque tellus. Suspendisse rhoncus est vitae felis egestas vitae venenatis lorem accumsan. Ut porta consequat neque, sed blandit magna gravida in. Quisque bibendum varius euismod. Cras et pretium tortor. Nunc convallis pellentesque hendrerit.</p>
        <p>Donec lectus sem, sollicitudin ac fermentum et, tincidunt eu justo. Morbi laoreet augue ut mauris elementum luctus. Nullam congue adipiscing arcu et tincidunt. Ut rhoncus, urna consectetur condimentum laoreet, elit massa ornare diam, vel molestie magna ante non ipsum. Donec dapibus nisi nec massa convallis sed aliquet arcu vulputate. Praesent pretium risus sed dolor mattis hendrerit ut et nisi. Duis porttitor faucibus lorem, id fringilla ligula fringilla id. Suspendisse hendrerit lacinia sem vel facilisis. Sed nec dui libero. Mauris vel nisi a turpis imperdiet suscipit non sed massa. Vestibulum id pellentesque lorem. Pellentesque euismod quam ut lectus ultricies a egestas justo malesuada. Sed ut libero vel lorem egestas convallis ac ac elit. Suspendisse tristique urna tellus.</p>
        <p>Suspendisse dui justo, semper id aliquet a, molestie vel enim. Nulla facilisi. Cras porta placerat feugiat. Aliquam nec consequat nisi. Donec sit amet turpis ligula. Maecenas viverra auctor nisi nec sollicitudin. Sed ullamcorper tempor lectus, eu euismod leo aliquam vel.</p>
    </div>
</div>
</div>

我非常感谢你的帮助,因为我有一段时间搞清楚这一点。

0 个答案:

没有答案