html - 100％宽度的背景仅向右填充

更新：之所以不起作用，是因为宽度为100％的元素位于div class =“ container”元素内。删除该问题已解决！（目前还没有足够的代表自己回答问题，只是想让观众知道它已经解决了。）

我正在自学蓝图css框架，并且遇到以下html / css的问题。我在类bigBox中似乎无法填充页面宽度的100％（它在右侧填充了100％，但与左侧的其他内容对齐。）

我如何使它按预期的方式工作？谢谢！

<head>
    <title>Hello</title>
    <!-- screen is default blueprint framework file -->
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection" />
    <!-- import custom styles -->
    <style>
        #topmenu {float:right; margin-top: 50px; /*margin-right: -30px;*/}
        #topmenu ul {list-style: none outside none; }
        #topmenu ul li { display: inline;  }
        #topmenu ul li a { text-decoration: none;
                           padding: 5px;}
        #topmenu .last { padding-right: 0px; }
        #topmenu .current { font-weight: bold; }

        .bigBox { width: 100%; position: absolute;
                 background-color: blue; height: 430px;
                }
    </style>
</head>

<body>
    <div class="container">

        <!-- logo -->
        <div class="span-12">
            <h1>Hello World</h1>
        </div>

        <!-- top menu -->
        <div class="span-12 last">
            <nav id="topmenu">
                <ul>
                    <li class="current"><a href="">Option 1</a></li>
                    <li><a href="">Option 2</a></li>
                    <li><a href="">Option 3</a></li>
                    <li class="last"><a href="">Option 4</a></li>
                </ul>
            </nav>
        </div>

        <br class="clear"/>
        <div class="bigBox">
            <div class="span-14">
                <h2>Content Left</h2>
            </div>
            <div class="span-10 last">
                <h2>Content Right</h2>
            </div>
        </div>


    </div>
</body>

最佳答案

“之所以不起作用，是因为宽度为100％的元素位于div class =“ container”元素内部。删除该元素可以解决问题！”

回答并为您制作了CW。

关于html - 100％宽度的背景仅向右填充，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6551476/