Question

我正在尝试通过创建投资组合来教授自己的html和css。问题是我在标题内为我的徽标和导航菜单创建了一个容器，并通过放大到最大值来调整浏览器大小。它会在html右侧创建不需要的空格。避免这些类型问题的最佳方法是什么？

http://jsfiddle.net/nt3HA/ http://jsfiddle.net/nt3HA/embedde

HTML

<div id="wrapper">
<div id="wrapper">
<div id="header">
<div id="innernav"> 
<div id="container"> 
<img src="images/ARlogo2.png" alt="ARlogo" id="logo"> 
</div>
</div>
</div><!-- #header -->
</div><!-- #wrapper -->

css

    html,
body{
            margin:0;
        padding:0;
        height:100%;
        background-color:#f1f1f1;
}

    #wrapper{
        min-height:100%;
        position:relative;
}

    #header{
        background: #242424;
}

    #innernav{ 
        padding: 20px 0;
}

    #container{
        margin: 0 auto;
            padding: 0;
        position: relative;
        width: 1040px;;
}

    #logo{
        position: relative;
}

    #content{
        padding-bottom:100px; /* Height of the footer element */
}

    #footer{
       background:#222222;
       width:100%;
       height:100px;
       position:absolute;
       bottom:0;
       left:0;
}

Answer 1

在container中，设置width:100%而不是1040px。

#container
{
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100%;
}

有效。这是你更新的小提琴： http://jsfiddle.net/nt3HA/1/

Answer 2

在修改行中，给容器宽度：auto会删除额外的右边空间！

 #container{width:auto;}

JSFiddle

HTML：不需要的空格

2 个答案: