带排水沟的容器

我正尝试在页面的顶部，底部，左侧和右侧创建一个带有20像素排水沟的页面。目前的设置为我的集装箱似乎并没有为20像素排水沟我想对我的容器带排水沟的容器

这里搭边的工作是我的HTML：

<body> 
<div class="neo_wrapper"> <!-- Wrapper start --> 
    <div class="neo_container"> <!-- Container start --> 
     <div class="neo_header-fixed"></div> 
     <div class="neo_column_a"></div> 
     <div class="neo_column_b"></div> 
     <div class="neo_column_c"></div> 
     <div class="neo_footer-fixed"></div> 
    </div> <!-- Container end --> 
</div> <!-- Wrapper end --> 
</body>

我的CSS

*{ 
    margin: 0; 
    padding: 0; 
    border: none; 
} 


/* Wrapper for entire page */ 
.neo_wrapper{ 
    width: 100%; 
    height: 900px; 
    margin: 0 auto; 
} 


/* Container for content */ 
.neo_container{ 
    width: 100%; 
    height: 100%; 
    margin: 120px -20px 50px 20px; 
} 

/* Fixed header */ 
.neo_header-fixed{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100px; 
    background: #999; 
    z-index: 1000; 
} 

.neo_column_a{ 
    width: 33.3333333333%; 
    height: 100%; 
    background: #063; 
    float: left; 
} 

.neo_column_b{ 
    width: 33.3333333333%; 
    height: 100%; 
    background: #00F; 
    float: left; 
} 

.neo_column_c{ 
    width: 33.3333333333%; 
    height: 100%; 
    background: #F00; 
    float: left; 
} 

/* Fixed footer */ 
.neo_footer-fixed{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 30px; 
    background: #999; 
    z-index: 1000; 
}

而且的jsfiddle：http://jsfiddle.net/x0cfdm5r/

来源

2014-10-02 Mike K.

什么是阴沟里？ – 2014-10-02 20:36:06

我想天沟是填充或保证金:) – 2014-10-02 20:38:12

考虑订购你的标记不同。将您的固定页眉和页脚放在包装纸的外面。这样，你可以在包装器中只有三个内容列，将边距（不是装订线）应用于包装器，并且瞧。 – TylerH 2014-10-02 20:42:12

你应该从.neo_container删除margin和应用padding到.neo_wrapper

你也应该使用CSS属性box-sizing，检查的详细信息上here 和here

看here为什么你应该（不是强制性的）使用box-sizing

使用默认盒大小，只要一个元素要么填充或边框应用，实际呈现宽度比你设置宽度更宽...

你可能会认为它的方式如下：使用方框大小：边界框填充和边框在方框内按压，而不是展开方框。结果是一个盒子，你设定的确切宽度和可以依靠。

看看下面的代码片段：

/* CSS Document */ 
 

 
/* This is our reset */ 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: none; 
 
    -webkit-box-sizing: border-box; 
 
    /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; 
 
    /* Firefox, other Gecko */ 
 
    box-sizing: border-box; 
 
    /* Opera/IE 8+ */ 
 
} 
 
/* Wrapper for entire page */ 
 

 
.neo_wrapper { 
 
    width: 100%; 
 
    height: 900px; 
 
    margin: 0 auto; 
 
    padding: 120px 20px 50px 20px; 
 
} 
 
/* Container for content */ 
 

 
.neo_container { 
 
    width: 100%; 
 
    height: 100%; 
 
    /*background: #000;*/ 
 
} 
 
/* Fixed header */ 
 

 
.neo_header-fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: #999; 
 
    z-index: 1000; 
 
} 
 
.neo_column_a { 
 
    width: 33.3333333333%; 
 
    height: 100%; 
 
    background: #063; 
 
    float: left; 
 
} 
 
.neo_column_b { 
 
    width: 33.3333333333%; 
 
    height: 100%; 
 
    background: #00F; 
 
    float: left; 
 
} 
 
.neo_column_c { 
 
    width: 33.3333333333%; 
 
    height: 100%; 
 
    background: #F00; 
 
    float: left; 
 
} 
 
/* Fixed footer */ 
 

 
.neo_footer-fixed { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    background: #999; 
 
    z-index: 1000; 
 
}

<body> 
 
    <div class="neo_wrapper"> 
 
    <!-- Wrapper start --> 
 
    <div class="neo_container"> 
 
     <!-- Container start --> 
 
     <div class="neo_header-fixed"></div> 
 
     <div class="neo_column_a"></div> 
 
     <div class="neo_column_b"></div> 
 
     <div class="neo_column_c"></div> 
 
     <div class="neo_footer-fixed"></div> 
 
    </div> 
 
    <!-- Container end --> 
 
    </div> 
 
    <!-- End of wrapper --> 
 
</body>

来源

2014-10-02 20:46:03 dippas

使用填充，而不是利润率为你的排水沟，那么你可以使用box-sizing（https://developer.mozilla.org/de/docs/Web/CSS/box-sizing）。

的jsfiddle：http://jsfiddle.net/x0cfdm5r/5/

/* Container for content */ 
.neo_container{ 
    width: 100%; 
    height: 100%; 
    padding: 120px 20px 50px 20px; 
    box-sizing: border-box; 
    /*background: #000;*/ 
}

来源

2014-10-02 20:41:08 Matthias

没有负填充这样的东西！ – 2014-10-02 20:42:31

哦，对不起，我忘了，忘记了。我将它固定在我的答案中，谢谢:) – Matthias 2014-10-02 20:44:21

只记得你忘了浏览器供应商的盒子尺寸属性，它不会使它跨越浏览器:) – dippas 2014-10-02 20:50:34

给你http://jsfiddle.net/x0cfdm5r/2/

/* Wrapper for entire page */ 
.neo_wrapper{ 
    height: 900px; 
    margin: 0 auto; 
    padding: 120px 20px 50px 20px; 
} 


/* Container for content */ 
.neo_container{ 
    width: 100%; 
    height: 100%; 

}

来源

2014-10-02 20:41:19

我建议使用position: relative对包装 - 它可以更容易与垫衬工作，你希望的方式。

更改这些：

/* Wrapper for entire page */ 
.neo_wrapper{ 
    left: 0; 
    right: 0; 
    position: relative; 
    padding: 20px; 
    height: 900px; 
    margin: 0 auto; 
} 


/* Container for content */ 
.neo_container{ 
    width: 100%; 
    height: 100%; 
    margin: 100px 0 30px 0; 
}

来源

2014-10-02 20:42:35 mufasa

带排水沟的容器

回答

相关问题