Question

我已经通过互联网尝试了所有解决方案而不适合我。我想在'wrap'div中创建一个'content'div和'side'div，然后将'wrap'作为一个footer div。如果我在“内容”中添加更多文本，则div会增长并适合它的内容，并向下推送页脚。 “侧面”也是如此。我做了一个jsfiddle.net/h97t9me4/4来说明但是它使用的是表而不是div。我怎样才能做到这一点？感谢。

Answer 1

我发现了如何为您制作内容DIV。我不确定你是否需要图像资料，但任何不是“内容”的东西都会脱离内容div。

CSS：

/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}

HTML：

将IMAGE_NAME.IMAGE_EXTENSION替换为您的图片。

<div id="page-background"><img src="IMAGE_NAME.IMAGE_EXTENSION" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<p>Hello world.</p>
</div>

我希望这会有所帮助，如果你需要我做更多的研究（如果这不是你需要的那样），那么只需评论一下，它会花一点点，但我会为你做的！ / p>

Answer 2

以下是我提出的建议：

http://codepen.io/anon/pen/wDnsr

HTML

    <div class="content">
        <p>This is the content</p>
    </div>

    <div class="side">
        <p>This is the side</p>
    </div>

    <div class="footer">
        <p>This is the footer</p>
    </div>

</div>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.content {
    width: 75%;
    padding: 1em;
    float: left;
}

.side {
    width: 25%;
    padding: 1em;
    float: left;
}

.footer {
    width: 100%;
    padding: 1em;
    clear: left;
}

拉伸div以适应它的内容

2 个答案: