具有固定位置的相对大小

Question

我能找到的最好的例子是我正在尝试通过我当前的网站项目实现的是亚马逊主页。      我希望页面上横幅的宽度为浏览器宽度的100％，但是在调整窗口大小时我不需要调整大小。另外，我希望整个页面不会调整大小，而是切断/滚动条。      横幅位于页面顶部，具有高分辨率图像作为背景，并包含我的导航栏和一些文本。      设置基于百分比的div的大小相对于屏幕分辨率的最佳方法是什么？有没有办法设置我的图像的大小而不使用大小的百分比？ （div宽度=屏幕宽度）。      我遇到包含文本没有正确调整大小的div的问题，在调整浏览器大小时文本会混乱。我正在使用html5和css与dreamweaver cs6。

Answer 1

我认为这就是你想要的。

标题会重新调整大小，但在页面调整大小时内容会保持固定大小：

https://jsfiddle.net/DIRTY_SMITH/zopnqxry/4/

<div class="header">

</div>
<div class="body">
<div class="left">

</div>
<div class="right">

</div>
</div>

CSS

body{margin: 0; overflow: scroll}
.header{width: 100%; height: 50px; background-color: lightblue;}
.body{width: 400px; height: 600px; background-color: lightgreen; margin-left: auto; margin-right: auto;}
.left, .right{width: 50%; height: 200px; float: left;}
.left{background-color: blue;}
.right{background-color: red;}