我怎样才能让绿色 DIV 顶部从红色 DIV 的底部开始(它有一个固定的高度?(我知道我可以使用 margin top 但在我的情况下它不会像红色标题 DIV 那样工作将具有可变高度,即当用户向下滚动 10px 时,标题高度将从 120px 变为 80px - 请注意,由于某种原因,JS 部分在 jsfiddle 上不起作用)http://jsfiddle.net/NHE2d/谢谢
<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; }
最佳答案
页眉的高度会改变吗?如果不是,您可以在 .block
上方添加一个空白 div
,其高度等于标题。在这种情况下是 height: 120px
编辑
你可以用两行 jquery 来做到这一点
var headerHeight = $(".header").height();
$(".spacer").css({"height": headerHeight+"px"});
关于html - 如何将 DIV 放置在固定位置的 DIV 下方(而不是后面)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20871199/