Question

我已将身体的以下代码用作其响应式网站

.body {
    margin: 0 auto;
    width: 70%;
    clear: both;
}

在身体之后我添加了一个带有css的标题，如下所示

.topheader {
    height: 5%;
    background-color: #ff6d00;
    width:100%
}

我面临的问题是我需要100％的标题，但由于体宽，它需要固定到70％。

我需要体宽70％，我需要在体内100％的标题宽度。

我们有没有机会像这样对齐？

Answer 1

你只是检查这个演示。我想你想要这样。你永远不会给身体宽度。

＆＃13;

body{padding:0;margin:0 auto;background-color:#ccc;}
.header{float:left;width:100%;position:absolute;top:0;left:0;padding:10px 0;background-color:#000;color:#fff;margin:0;}
.container{margin:0 auto;width:70%;background-color:#fff;height:200px;}

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<div class="container">
<div class="header">
This is an Demo

</div>
</div>
</body>
</html>

＆＃13;

Answer 2

所以你想要你的标题大约是视口的100％而且主体只有70％的视口？

我会说你必须设置css：

#viewport
{
 width:100%;
 [...]
}
.body
{
width:70%;
[...]
}
.header
{
width:100%;
[...]
}

如果从视口继承的主体宽度为100％，则可以将主体设置为70％，并且从视口继承的标头也大约为100％。

当然你可以在身体外面设置标题并给他100％，所以你不需要额外的#viewport。

Answer 3

你遇到的问题是因为你已经将 body 写成了一个类。

.body
{
    margin: 0 auto;
    width: 70%;
    clear: both;
}

而不是你必须只写身体，删除身体前的点。

body
{
    margin: 0 auto;
    width: 70%;
    clear: both;
}

如果你在这种情况下将身体作为一个班级写

首先编写正文类

.body
{
    margin: 0 auto;
    width: 70%;
    clear: both;
}

然后像这样写 topheader 类

.body  .topheader
{
    height: 5%;
    background-color:#ff6d00;
    width:100%
}

Answer 4

看看这是否有效......

<html>

<head>
    <style type="text/css">
        body{ 
            color: #000000;
            font-size: 87.5%;
            font-family: arial;
            line-height: 1.5;
            text-align: left;
        }
        .body{
            margin: 0 auto;
            width: 70%;
            clear: both;
        } 
        .topheader{ 
            height: 5%;
            background-color:#ff6d00;
            width: 200%;    
            } 
        .laser{
            float:left;
            padding:40px;
            margin-top:-35px;
        }
    </style>

<body class="body">
    <div class="topheader" style="margin-left:-250px">
        <nav> 
            <ul style="margin-left:180px;">
                <li class="laser">Books</li>
                <li class="laser">Video</li>
                <li class="laser">Audio</li>
                <li class="laser">Download</li>
                <li class="laser">Login</li> 
                <li class="laser">Register</li> 
            </ul>
        </nav>
    </div> 
</body>

</html>

CSS正文和标题问题

4 个答案: