Question

我正在尝试获得一个简单的页面布局，其中导航栏垂直位于用户窗口的右侧，占用的空间不超过20％。左边剩余的80％空间用于内容。

我希望整个页面可以调整大小，因此无论浏览器窗口的大小（在合理范围内），内容都会调整大小到用户的屏幕。一切正常并且调整大小很好，但是navBar存在一个问题。这是一个CSS摘录：

body{
    background-color: #111111;
    font-family: Roboto;
    color: #cccccc;
    font-weight: 300;
    font-size: 14pt;
    height: 100%;
}

#content{
    width: 80%;
    float: left;
}

#navBar{
    width: 20%;
    height: 100%;
    background-color: #00C9FF;
    float: left;
    position: absolute;
}

#welcome{
    background-color: #222222;
    text-align: center;
    margin: 1%;
}

问题：

如果我按原样保留上面的代码，navBar会在屏幕右侧呈现，但它不是浏览器窗口高度的100％。请注意，当浏览器窗口的WIDTH发生更改时，它仍会调整大小。
如果我将navBar的位置设置为绝对位置（位置：绝对值），则导航栏会准确呈现它应该呈现的方式，除非它浮动到浏览器的左侧，基本上将它放在应该位于的完全相反的一侧。 / LI>

演示： http://codepen.io/anon/pen/YPyvzO（删除位置：绝对以查看导航栏应该呈现的位置）

我尝试了几种不同的方法，包括在CSS中将“HTML”设置为高度：100％以及导航栏的几种不同位置属性，但都无济于事。我希望这只能在CSS中完成，但我不确定它是否可行。

Answer 1

添加以下内容：

    position: absolute;
    right: 0;

到#navBar。我需要花费很长时间才能理解的一件事是position: absolute会覆盖所有内容，甚至浮动。

Answer 2

当你调整浏览器的宽度和高度大小时，为此你必须在CSS中使用媒体查询，你必须告诉浏览器，在这个宽度中，导航栏应该是给定的宽度。另一个选择是你可以使用bootstrap，在bootstrap你不要写太多的CSS。所有的工作都变得容易了。

CSS Auto-height Div无法正确定位

2 个答案: