0

我正在尝试制作一个距左侧有 12px 边距的页面。我想将背景灰色设置为 12px（不管这个）。

在左侧设置 12px 左边距后，我想将所有其他屏幕尺寸提供给容器，我该如何提供它。

见 jsfiddle http://jsfiddle.net/7vzSQ/

我想要的是：假设将来如果我给我的页面一个背景并且左边的 12px 是白色边距，那么有没有人知道一个技巧，以便 .container 将获得所有屏幕尺寸（除了我通过左边距设置的 12px 边距）

<div class="container">

    <header>
        <hgroup>
            <div class="logo">
                test
            </div>
        </hgroup>
    </header>
    <div class="content">
        <div class="logo">

        </div>
    </div>
    <footer>

    </footer>
</div>

有人检查http://jsfiddle.net/7vzSQ/7/embedded/result/我已经更新了三个背景，但不知道为什么它没有出现在页面中。

我这样做的主要目的是我可以为 .container 提供所有宽度（100% -12px）。如果我给了 100% 它是行不通的。我试过 css3 的 calc 功能没用。我尝试 calc(100%+ 12px) 工作，但 calc(100% - 12px) 不工作（带减号）。

有没有人猜得到它的工作。

4

3 回答 3

2

如果你想变得超酷，你可以使用calc：

#container{
  margin-left:12px;
  width: 100%;              /* fallback for non-supporters, produces scrollbar */
  width:    -moz-calc(100% -12px); 
  width: -webkit-calc(100% -12px);
  width:         calc(100% -12px); 
}

然而，这将取消所有 IE 用户直到版本 8 和那些可怜的 Opera 用户的资格：-D（请参阅 MDN-Compat 列表或caniuse）。

如果你想成为老派，你可以使用绝对定位（遇到溢出问题）

#container{
    position:absolute;
    left:12px;right:0;
}

还有一点老派你使用包装元素：

#outerwrapper{
     padding-left:12px;
}
#container{
     width:100%;
}

带有标记：

<div id="outerwrapper">
   <div id="container">
   </div>
</div>
于 2013-01-11T13:18:54.090 回答
1

试试这个

    <style>
body{margin: 0px; padding: 0px;}
#cover
{
    width: 100%;
    height: 200px;

    padding: 0px 0px 0px 12px;
    margin:0px;
}
#inner{width:100%; height: 200px; margin: 0px; padding: 0px; background: #bababa; }

</style>



<div id="cover">  
    <div id="inner">

    </div>
</div>

它可能会帮助你。

于 2013-01-11T13:08:42.767 回答
0

Rupali 和 Christoph，感谢你们在这个问题上帮助我。我终于为我的问题找到了解决方案。

<div class="topline">

</div>
    <div class="bgs">
        <div class="bg1 bg"></div>
        <div class="bg2 bg"></div>
        <div class="bg3 bg"></div>
    </div>
<div class="container">

    <header>
        <hgroup>
            <div class="logo">
                <h1>Blah blah</h1>
                <div class="desc">
                lorem ipsum dollar sit amet
                </div>
            </div>
        </hgroup>
    </header>
    <div class="content">

    </div>
    <footer>

    </footer>
</div>


.bgs {
  float: left;
}
.bgs .bg {
  width: 9px;
  height: 100%;
  float: left;
  margin-right: 0px;
}
.bgs .bg1 {
  background: #0068B3;
}
.bgs .bg2 {
  background: #65B561;
}
.bgs .bg3 {
  background: #F99D32;
}
.container {
  margin-left: 50px;
  float: left;
  position: absolute;
}

这将使它对我有用。

于 2013-01-11T14:12:25.523 回答