将内容大小调整为窗口大小

时间:2012-11-09 22:32:02

标签: html css

我正在设计一个新网站(现在它远非任何东西),但我正在努力调整其中的内容,实际窗口大小。图片讲千言万语。第一张照片是正确的方式,下面是我调整窗口大小时的方式。

enter image description here

enter image description here

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

我将在标题部分中有两个小节,其中一个是代码中的hdrmast-topbar。父项将被修复,并随着滚动一起移动。但是,我希望内容可以通过窗口调整大小,例如:http://incub.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; }

谢谢。

2 个答案:

答案 0 :(得分:2)

只需删除

.container { width: 1120px;

使用width: 100%;而不是......

答案 1 :(得分:2)

您可以为容器指定最大宽度为1120px,宽度为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/: - )