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

Question

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

    <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>

 /* css */

    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-left: auto;
    margin-right: auto; 
    width: 1235px;
    background: red;
}

#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;
    position: absolute;
    top: 90%;
}

Answer 1

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

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%，不需要的可以去掉。

Answer 2

据我所知，您希望包装器 div 覆盖页面的 100% 的高度和宽度，并且为了将页脚设置在页面底部，您需要将页脚类更改为

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

这将允许 div 以 15 px 的边距保持在底部。