100% 可扩展容器 div，带有外边距

发布于 2024-11-26 13:25:28 字数 269 浏览 2 评论 0原文

我有一个令人困惑的问题。

我需要一个 100% 宽度、100% 高度的容器，其边距为 20px，可随内容扩展。这有可能吗？我得到的最接近的是这种方法：

#container {
    position:absolute;
    top:0;
    bottom:0px;
    left:0;
    right:0;
    margin:20px;
}

但是它不会随着内容的高度而扩展。

有人知道这是什么神术吗？

原文

i have a mind bobbling question.

I need a 100% width, 100% height container with 20px margin that expands with content. Is this at all possible? The closest i got was with this method:

#container {
    position:absolute;
    top:0;
    bottom:0px;
    left:0;
    right:0;
    margin:20px;
}

but then it wont expand in height with content.

Anybody know the divine technique for this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江湖正好 2024-12-03 13:25:29

我很确定不可能用单个元素来完成，但如果您不介意有 3 个间隔 div 元素，则此解决方案适用于所有浏览器：

<html>
<head>
<style type="text/css">
* {
    margin: 0;
}
html, body {
    height: 100%; padding: 0; /* padding 0 is for jsfiddle */
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: -20px; /* the bottom margin is the negative value of the spacer height */
    background-color: #ccc;
}
.spacer.edge {
    background-color: white; /* same as body background */ 
}
.spacer {
    height: 20px;
 }

</style>
</head>
<body>
    <div id="wrapper">
        <div class="spacer edge"></div>
        <!-- content here -->
        <div class="spacer"></div>
    </div>
    <div class="spacer edge"></div>
</body>
</html>

这是一个可以使用的小提琴： http://jsfiddle.net/dTyTW/

I'm pretty sure it isn't possible to do with a single element, but if you don't mind having 3 spacer div elements, this solution works in all browsers:

<html>
<head>
<style type="text/css">
* {
    margin: 0;
}
html, body {
    height: 100%; padding: 0; /* padding 0 is for jsfiddle */
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: -20px; /* the bottom margin is the negative value of the spacer height */
    background-color: #ccc;
}
.spacer.edge {
    background-color: white; /* same as body background */ 
}
.spacer {
    height: 20px;
 }

</style>
</head>
<body>
    <div id="wrapper">
        <div class="spacer edge"></div>
        <!-- content here -->
        <div class="spacer"></div>
    </div>
    <div class="spacer edge"></div>
</body>
</html>

Here's a fiddle to play with: http://jsfiddle.net/dTyTW/

回复收藏 0 原文

拧巴小姐 2024-12-03 13:25:29

如果你想用内容扩展div，那么你需要设置position：relative，并且为了坚持到底部，还需要设置padding-bottom。

#container {
position:relative;
top:20px;
bottom:20px;
left:20px;
right:20px;
padding-bottom: 80%;
border:1px solid red;

值

可以根据要求进行调整。
尝试此处

I you want to expand the div with the content , then you need to set position : relative and in order to stick towards the bottom padding-bottom also need to be set.

#container {
position:relative;
top:20px;
bottom:20px;
left:20px;
right:20px;
padding-bottom: 80%;
border:1px solid red;

}

Values can be adjusted as per the requirement.
Try here

回复收藏 0 原文

暗喜 2024-12-03 13:25:29

删除边距并为每个位置指定20px。

同时删除底部。

添加 padding-bottom:20px;

#container {
    position:absolute;
    top:20px;
    left:20px;
    right:20px;
    padding-bottom:20px; 
}

http://jsfiddle.net/jasongennaro/ w7dQP/3/

编辑

如果您不反对使用一些 jQuery，您也可以这样做，

var h = $(document).height();
var h2 = $('#container').height();

if(h2 < h){
    $('#container').height(h);
}

这可以确保 div 小于浏览器视口，它将扩展以适应它。

一旦文本变大或更大，样式就会处理它。

http://jsfiddle.net/jasongennaro/w7dQP/8/

Remove the margin and give each position a 20px.

Also remove the bottom.

Add padding-bottom:20px;

#container {
    position:absolute;
    top:20px;
    left:20px;
    right:20px;
    padding-bottom:20px; 
}

http://jsfiddle.net/jasongennaro/w7dQP/3/

EDIT

If you are not opposed to using some jQuery, you could also do this

var h = $(document).height();
var h2 = $('#container').height();

if(h2 < h){
    $('#container').height(h);
}

This ensures that if the div is smaller than the browser viewport, it will expand to fit it.

Once the text is as big or bigger, the styles will take care of it.

http://jsfiddle.net/jasongennaro/w7dQP/8/

回复收藏 0 原文

陈年往事 2024-12-03 13:25:29

<html>
<style>
body
{
  margin:0px;
}
div
{
  position: absolute;
  padding: 20px;
}
img
{
  position: relative;
  width: 100%;
}
</style>
<body>
  <div>
    <img src="http://manual.businesstool.dk/screen.jpg" />
  </div>
</body>
</html>

使用 padding 属性...查找盒子模型。

<html>
<style>
body
{
  margin:0px;
}
div
{
  position: absolute;
  padding: 20px;
}
img
{
  position: relative;
  width: 100%;
}
</style>
<body>
  <div>
    <img src="http://manual.businesstool.dk/screen.jpg" />
  </div>
</body>
</html>

Use the padding property... look up the box model.

回复收藏 0 原文

~没有更多了~