如何创建全屏网站设计？

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为“底部”的<div>元素，使用class="bottom"代替。

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

Answer 3

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

• 火狐-> get FireBug -> rightClick ->使用FireBug检查元素
• Chrome -> RightClick -> InspectElement

现在，您可以在左侧选择html元素，并在右侧获取css部分。此时，您可以单击n% (例如，100%)，并使用上下键来更改它。