Question

如何让绿色DIV顶部从红色DIV（具有固定高度？）的底部开始？（我知道我可以玩边缘顶部，但在我的情况下，这不会起到红色标头DIV的作用将具有可变高度，即当用户向下滚动10px时，标题高度将从120px更改为80px - 请注意，由于某些原因JS部分无法在jsfiddle上运行）http://jsfiddle.net/NHE2d/谢谢

enter image description here

<div class="header">
<div class="logo">Logo</div>                            
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    </ul>
</li>
<li><a href='#'>Link 2</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
<li><a href='#'>Link 3</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
</ul>
        </div>
        <!-- end header-->

            <!-- template -->
<div class="block"></div>


.block {

    width:90%;
    height: 800px;
    background: green;
}

.header {
    width: 100%;
    background: red;
    color: #124191;
    font-weight: 300;
    font-size: 28px;
    display: table;
        position: fixed;
        z-index: 999999;
        opacity: 0.7;
}

.logo {
vertical-align: middle;
line-height: 120px; /* this is set to same height as the div */
left:0;

color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
}

 .drop_menu {
    padding:0;
    margin:0;
    list-style-type:none;
line-height: 120px
    right: 0;
    display: table;
    z-index: 3000;
       display: table-cell;
    vertical-align: middle;
    right: 0;

}

.bigheight {
    background:red;

}
.shortheight {
    background:green;
    height: 60px;
       -webkit-transition-duration: 400ms;
        -webkit-transition-function: linear;

}
.drop_menu li { display: table-cell;
    vertical-align: middle; float: right;}

.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#666;
    text-decoration:none;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;



}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }

Answer 1

标题的高度是否会发生变化？如果不是，您只需在div上方添加一个高度等于标题的空白.block。在这种情况下，height: 120px

修改

你可以用两行jquery来做到这一点

var headerHeight = $(".header").height(); $(".spacer").css({"height": headerHeight+"px"});

JSFIDDLE

Answer 2

如果将两个div放在容器div中，然后相对于容器设置两个header / logo div，该怎么办？因此，徽标位于0,0位置，标题位于0,120。

Answer 3

最简单的方法是使用JavaScript来计算高度（如果你使用的是jQuery，那就更容易了）。我能想到的唯一非JS选项就是这个

创建固定标题
在其后立即放置一个EXACT副本，但删除position:fixed;并将其替换为visibility:hidden;

CSS

#header { position:fixed; height:50px; background-color:#0f0; }
#placeholder { height:50px; visibility:hidden; }
#otherDiv { height:350px; background-color:#f00; }

HTML

<div id='header'>Text Here</div>
<div id='placeholder'>Text Here</div>
<div id='otherDiv'>Other stuff</div>

Working Example

如何在固定位置的DIV下面（而不是在后面）放置DIV？

3 个答案:

CSS

HTML