css - 在基线导航栏上方垂直对齐 div

Question

我有一个页面底部有导航栏的网页(高度为 110px)。我想要做的是在页面的主要内容中设置 2 个相邻的 float div，而不会溢出此导航栏。

我已经设置好了，但是我很难让 div 垂直对齐。

我有以下 CSS 代码设置:

#content {
height: 100%;
width:1200px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
    top: 10px;
position:absolute;
overflow:hidden;
z-index:1;
}

.container {
padding: 5px 5px 5px 5px;
}

.container {
margin:0 auto;
}


.clear {
clear:both;
}

.left {
float:left;
display:inline;
}

.right {
float:right;
display:inline;
 }

#left-column {
float:left;
display:inline;
clear:both;
width:550px;
height:550px;
padding-left:40px;
background-color:#0F0;
}

#right-column {
float:right;
display:inline;
clear:right;
width:550px;
height:550px;
padding-right:40px;
background-color:#F00;
}

html 很简单:

<div id='content'>
<div class='container'>
<div id="left-column">content here</div>
<div id="right-column">content here</div>
<br class="clear" />
</div>
</div>

有谁知道如何在屏幕上垂直对齐这些 div？我确信有一些不需要的 CSS 代码——我只是从以前构建的页面中取出它，所以如果需要，请随时告诉我删除它的整个 block !目前，div float 在页面顶部。当我在 Macbook Pro 13"屏幕上查看它时，它看起来不错，但是一旦有人在更大的浏览器窗口中查看该页面，它无疑会看起来非常糟糕，因为 div 和导航栏之间有很多空间……提前谢谢了!京东

Answer 1

不确定你到底想要什么样的外观，但试试看这是否对你有帮助..

#content {
position:absolute;
top:0;
left:0;
width: 100%;
height: 200%;
overflow:auto;
z-index:1;
}

.container {
padding:5px;
margin:0 auto;
}

#left-column {
position: fixed;
top: 50%;
left: 10px;
width:50%;
height:200px;
margin-top: -100px;
background-color:#0F0;
}

#right-column {
position: fixed;
top: 50%;
right: 10px;
width:50%;
height:200px;
margin-top: -100px;
background-color:#F00;
}

#menu {
position: fixed;
width: 100%;
height: 110px;
bottom:0;
background-color: #ddd;
}
</style>

<div id='content'>
    <div id="left-column">content here</div>
    <div id="right-column">content here</div>
    <div id="menu">menu here</div>
</div>

您可以根据需要调整宽度和高度等。让我知道这是否接近你想要的东西