我有一个三列设计,其中最右边的列包含大量的' Divs'封装折叠信息,可以滚动浏览中心鼠标滚轮溢出。三列设置为760px,页脚低于该列。这一切都很好看,看起来不错,但页面继续下降到大约4000px(我的猜测是隐藏元素的大小)。
我的尝试:
body,page wrap,column,in column wrapper all set max-height,没有区别。
为所有页面元素添加了一个红色边框(来自堆栈溢出帖子的想法)在那里没有任何可见的东西将其推出。
用vh数字进行一些试验性测试,但没有运气。
这是列顶部的一个片段,但是下面还有36个div:
<aside id="option_sidebar" class="content_rounds">
<h2>Scientists:</h2>
<div class="inner">
<div class="option op1">
<img src="../images/Science/Michael_Archer.jpg" alt=""><h3>Michael Archer</h3>
<div class="collapse_wrap">
<p>Australian Scientists - Fossils</p>
<a href="http://www.smh.com.au/national/waking-the-dead-20130617-2ocz4.html" target="_blank">Resource link 1</a>
<a href="http://www.ted.com/speakers/michael_archer.html" target="_blank">Resource link 2</a>
<a href="http://www.youtube.com/watch?v=ErexJkoDhGI" target="_blank">Resource link 3</a>
<a href="http://science.org.au/fellows/feature-fellow/archer/index.html" target="_blank">Resource link 4</a>
<a href="http://www.keynotes.org/speaker/michaelarcher" target="_blank">Resource link 5</a>
<a href="http://oconnoroz.wordpress.com/tag/mike-archer-paleontologist/" target="_blank">Resource link 6</a>
<a href="http://lifeboat.com/ex/bios.michael.archer" target="_blank">Resource link 7</a>
</div>
</div>
这些是直接应用于列的样式:
#option_sidebar {
width: 260px;
padding: 5px 15px;
float: left;
background-color:#fff;
overflow:hidden;
height:760px;
}
.content_rounds{
border-radius: 10px 10px 5px 5px;
box-shadow: 3px 3px 1px #8b8b7a;
border: solid 1px #8b8b7a;
}/*don't think this matters*/
#option_sidebar .inner{
overflow: auto;
max-height:700px;
margin:0px -50px 20px 0px;
padding-right:35px;
}
.option{
border: solid 1px #8b8b7a;
width:94%;
padding: 5px 10px;
margin:5px 10px 5px 0px;
background-color:#fff;
overflow:hidden;
}
.option img{
display: inline;
max-width:70px;
max-height:100px;
width:auto;
height:auto;
margin:5px;
}
.option h3, .option h4, .option h5{
display:inline;
margin-left:10px;
margin-right:auto;
margin-top:5px;
margin-bottom:5px;
position:relative;
}
.option a{
display:block;
}
.op1:hover > .collapse_wrap {
-webkit-transition: .5s;
transition: .5s;
visibility: visible;
position:relative;
opacity: 1 ;
}
.op1 h3{
padding-top:10px;
}
我希望有足够的细节可以提供帮助,但不能过多,
提前感谢您的协助。
答案 0 :(得分:0)
感谢您在评论中提供完整的示例!
您可以将position: relative;
添加到.op1
div,.inner
div或#option_sidebar
来解决您的问题。
来自Mozilla Developer Network:
[relative
]关键字列出了所有元素,就好像元素没有定位一样,然后调整元素的位置,而不改变布局(从而为元素留下一个空隙,如果元素没有被定位的话)。
更多:https://developer.mozilla.org/en-US/docs/Web/CSS/position