在页面底部设置div而不会在较小的屏幕尺寸上重叠另一个div

Question

我想垂直对齐2个div - 页面底部的页脚div（距离底部大约15px的边距），以及页面中心的内容div）。该网页将响应。她是页面的jsfiddle： https://jsfiddle.net/tyvodoh0/1/

var User = $resource('http://thirdpartyapi.com/user/:userId', {userId:'@id'});

Answer 1

从我所看到的你想要包装div来覆盖100％的高度和页面宽度，并且为了在页面底部设置页脚，你需要将页脚类更改为< / p>

.footer {
  margin-bottom: 15px;
  position: absolute;
  bottom: 0;
}

这将允许div保持在底部，边距为15像素。

Answer 2

我编辑了您的代码以使其响应。调整窗口大小时，您可以进一步修复图像的位置。

h1 {
	color: #3a2a0c;
	font-size: 47px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

h2 {
	color: #3a2a0c;
	font-size: 28px;
	text-transform: capitalize;
	margin-bottom: 14px;
}

h3 {
	color: #926d55;
	font-size: 15px;
	margin-bottom: 40px;
}

p {
	color: #3a2a0c;
	font-size: 15px;
	text-align: justify;
	line-height: 110%;
	border-bottom: 1px solid #caccc6;
}

hr {
	border-color: #3edf4f6;
	margin-top: 50px;
}

.wrapper {
	background-color: rgba(255,255,255,0.9);
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.center {
    display: table-cell;
    vertical-align: middle;
	background: pink;
	float: none;
}

#content {
    margin: auto;
    width: 100%;	
    background: red;
    padding: 10px;
}

#profile_pic {
	width: 396px;
	padding-right: 33px;
	float: left;
	background: blue;
}

#profile_pic img {
  width: 396px;
  height: auto;
}

/*            
#information {
width: 806px;
	background: yellow;
	float: left;
}
*/            

#contact {
	font-size: 15px;
	color: #926d55;
}

.hide {
	display: none;
}

#contact span {
	margin-right:22px;
}

#information p {
	padding: 40px 0;
}

#left {
	float: left;
}

#right {
	float: right;
}

.links {
	padding-top: 15px;
	font-size: 15px;
}

.links img {
	margin-right: 6px;
}

.links a {
	margin-left: 6px;
	margin-right: 6px;
	color: #3a2a0c;
}

.links a:last-child {
	margin-right: 0px;
}

.links a:hover {
	color: #926d55;
}

.footer {
	float: none;
	top: 90%;
    width: 100%;
    padding: 10px;
}

<div class="wrapper">
    <div class='center'>
        <div id='content'>
            <div id='profile_pic'>
                <img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'/>
            </div>
            <div id='information'>
                <h1>Title</h1>
                <h2>Subtitle</h2>
                <p> 4
down vote
favorite

Does the position of the sun in a hollow earth scenario affect the way light scattering would "color" the sky?

My understanding is the reddish-orange color during sunrise/sunset is caused by the sun being at a more oblique angle in contrast to the standard blue when the sun is fully up.

My intuition states that the sky's color wouldn't change much, or if it did would become a washed out version of whatever it normally would be, ie blue on Earth. The most dramatic coloring that I could imagine would be a gradient from say blue to red as you look from the center of the sky to the horizon, given an Earth colored sun and atmosphere. I doubt the gradient scenario is possible, but it would be neat if it was.
                </p>

            </div>
        </div>
        <div class='footer'>
            <p>Div to be set at bottom</p>
        </div>
    </div>
</div>

.wrapper的高度设置为：height:100%，如果您不需要，可以将其删除。