Question

我想要达到的目标是这样的：http://www.svkariburnu.com/，我不知道为此，我应该只在我的css中使用％来表示我的价值观，或者还有更多内容，我想要什么要做的是创建一个宽度与窗口相同的菜单，

我已经尝试使用％作为元素并且它有效但我怎么知道设置保留值的确切百分比我想要它们？

我看了，我发现那些使用js实现这一目标的人是必要的吗？

到目前为止，这是我的代码：

HTML：

<div id="wrapper">

<div id="banner"></div>

<div id="menu">

<div id="buttom"></div>
<div id="buttom"></div>
<div id="buttom"></div>
<div id="buttom"></div>
<div id="buttom"></div>


</div>

<div id="iframe"></div>

</div>

CSS示例：

 body{
        background:#f7f7f7 url(../images/pattern.png) repeat top left;
        color:#000;
        font-family:'Georgia', 'Trebuchet MS', serif;
        font-size:12px;
    }

    #wrapper{
        width:100%;
        height:900px;
        margin:auto;
    }

    #banner{
        width:100%;
        height:200px;
        float:left;
        background-color:#333
    }

    menu{
        width:100%;
        height:50px;
        float:left;
    }

    #buttom{
        width:20%;
        height:50px;
        float:left;
        background-color:#063;
    }

它工作但现在对于iframe我不知道如何在中间设置它我不希望iframe是全宽我需要它在80％，每边有10％免费，等等，我该怎么办呢？有没有这方面的教程？

提前致谢！

Answer 1

只要使用它，无论发生什么，每边都会有间距;

 #wrapper{
        width:100%;
        height:900px;
        margin:auto;
        padding:0 20px 0 20px;
    }

Answer 2

首先，对于ID为＆＃34; bottom＆＃34;的<div>元素，请改用class="bottom"。

对于<div id="iframe">，您可以尝试使用width:80%; margin:auto;，看看是否能提供所需效果。

Answer 3

获得有关宽度的实时视觉体验：

Firefox - ＆gt;得到FireBug - ＆gt; rightClick - ＆gt;使用FireBug检查元素
Chrome - ＆gt; RightClick - ＆gt; InspectElement

现在你可以选择左侧的html元素并在右侧获得css部分。此时，您可以单击n％（例如100％）并使用向上和向下键进行更改。

Answer 4

如果您希望页面基于视口大小，则可能需要viewport units。但是，请注意在您正在开发的浏览器中使用它们they may not be supported。

因此，如果您需要的元素大小为视口的80％，则只需将width: 80vw添加到您的CSS即可。同样，如果每侧的空间视口需要10％，则可以添加margin: 0 10vw;。（实际上，让边距处理margin: 0 auto;）

可能更好

如何创建全屏网站设计？

4 个答案: