从隐藏元素推出的页脚下方删除空白区域

时间:2015-12-01 23:28:11

标签: html css

我有一个三列设计,其中最右边的列包含大量的' 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;

    }

我希望有足够的细节可以提供帮助,但不能过多,

提前感谢您的协助。

1 个答案:

答案 0 :(得分:0)

感谢您在评论中提供完整的示例!

您可以将position: relative;添加到.op1 div,.inner div或#option_sidebar来解决您的问题。

来自Mozilla Developer Network
[relative]关键字列出了所有元素,就好像元素没有定位一样,然后调整元素的位置,而不改变布局(从而为元素留下一个空隙,如果元素没有被定位的话)。
更多:https://developer.mozilla.org/en-US/docs/Web/CSS/position