热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

显示一个div宽度100%带有边距-Displayadivwidth100%withmargins

Iwanttodisplayanexpandablediv(width:100%)withmargins我想显示一个可扩展的div(宽度:100%),带有边距……Her

I want to display an expandable div (width: 100%) with margins...

我想显示一个可扩展的div(宽度:100%),带有边距……

Here is my code :

这是我的代码:

"some content here"

And here is my css code :

这是我的css代码:

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: 100%;
  height: 300px;
  margin: 10px;
}​

LIVE DEMO

现场演示

5 个解决方案

#1


12  

You can use the following CSS to achieve the desired result:

您可以使用以下CSS来实现所需的结果:

#page {
   background: red;
   overflow: auto;
}

#margin {
   background: green;
   height: 280px;
   margin: 10px
}

#2


59  

You can use calc() css function (browser support).

您可以使用calc() css函数(浏览器支持)。

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: -moz-calc(100% - 10px);
  width: -webkit-calc(100% - 10px);
  width: -o-calc(100% - 10px);
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}​

Alternatively, try using padding instead of margin and box-sizing: border-box (browser support):

或者,尝试使用填充代替空白和框尺寸:边框-框(浏览器支持):

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}

#3


14  

Sometimes it's better to do the opposite and give the parent div padding instead:

有时,最好做相反的事情,给父div填充:

LIVE DEMO

现场演示

What I did was change the CSS of #page to:

我所做的是将#页面的CSS更改为:

#page {
    padding: 3%;
    width: 94%; /* 94% + 3% +3% = 100% */

    /* keep the rest of your css */
    /* ... */
}

Then delete the margin from #margin

然后从#margin中删除

Note: this also adds 3% to the top and bottom (so 6% to the height) which makes it a little taller than 300px - so if you need exactly 300px, you could do something like padding:10px 3%; and change the height:280px; to add up to 300px again.

注意:顶部和底部增加了3%(即高度增加了6%),使其略高于300px——所以如果你需要300px,你可以做如下操作:10px 3%;和改变高度:280 px;再加300像素。

#4


4  

For LESS users only:

为减少用户只有:

Using the nice solution of Vukašin Manojlović doesn't work out of the box because LESS executes + or - operations during the LESS compilation. One solution is to escape LESS so that it doesn't execute the operation.

使用好的解决Vukašin Manojlović行不通的,因为少+或-操作期间执行编译。一种解决方案是减少转义,这样它就不会执行操作。

Disable LESS-CSS Overwriting calc()

禁用LESS-CSS覆盖calc()

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
width: -o-calc(~"100% - "@someMarginVariable*2);

or can use a mixin like:

或者可以使用混合器,比如:

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@marginSize+@paddingSize)*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}

#5


1  

The correct way to achieve this by standard is:

以标准实现这一目标的正确方法是:

#margin {
   background: green;
   height: 280px;
   margin: 10px;
   width: auto;
   display: block;
}

推荐阅读
author-avatar
是唐雨冰吗
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有