1

我正在设计一个新网站（现在它远非任何东西），但我正在努力将其中的内容调整为实际的窗口大小。图片讲一千个字。第一张图片是正确的方式，下面是我调整窗口大小时的方式。

在此处输入图像描述

在此处输入图像描述

<div class="header">
<div class="hdrmast-topbar">
    <div class="container">
        <span>Test :: Link 1 | Link 2</span>
    </div>
</div>

我将在标题部分有两个栏，其中之一是代码中的 hdrmast-topbar。父级将被固定并随着滚动而移动。但是，我希望内容随窗口调整大小，例如：http: //incu.ro/

目前，标题处于相对位置状态，因为我正在尝试这个问题。

/* Header */

.header { min-width: 100%; position: relative; }
.hdrmast-topbar { background-color: #000; width: 100%; max-height: 25px; font-size:   11px; color: #fff; font-weight: bold; text-align: right; padding-top: 5px; padding-bottom: 5px; }
.hdrmast-topbar span { margin: 0; padding: 0; }

/* Global */

.container { width: 1120px; margin: 0 auto; }

谢谢你。

4

2 回答 2

2

只需删除

.container { width: 1120px;

改用width: 100%;...

于 2012-11-09T22:41:14.570 回答
2

您可以为容器提供 1120 像素的最大宽度和 100% 的宽度。

​.container{
    margin: 0 auto;
    background:blue;
    max-width:1120px;
    width:100%;
}​

JsFiddle：http: //jsfiddle.net/tDjA9/2/embedded/result/

希望这会有所帮助，并且我已经正确理解了您的问题.. :-)

编辑 -

为了获得与您发布的网站相同的效果，您应该正确地使用 position:fixed 。

我创建了一个新的 jsfiddle 来展示这一点。http://jsfiddle.net/tDjA9/6/embedded/result/ :-)

于 2012-11-09T22:54:01.980 回答