【发布时间】：2015-08-20 17:31:49
【问题描述】：
上下文
我正在尝试创建一个可以适应任何类型屏幕的页面。此页面包含一个可滚动的部分和一个固定的页脚，始终可见。我正在使用 vh（视口高度），以便页面永远不会滚动，只有可滚动容器内的内容。
问题
我似乎无法让页脚在每个屏幕宽度和高度上完美对齐（大屏幕到手机）。这是我已经尝试过的codepen。
我不明白为什么我的页脚的width: inherit 没有占用survey-container 的宽度。而且似乎在 vh（可滚动容器）中使用 height 和在 vh（页脚）中使用 top 不是要走的路，但我不知道如何定位它们，例如 page 从不滚动（仅容器）。
代码
HTML
<div class="container">
<div class="row">
<div class="well survey">
<div class="survey-container">
<h3 class="text-center">Survey</h3>
<p class="homepage-text text-center">
Ribs ribs corned strip hamburger landjaeger strip ribs round chuck pancetta cupim steak. Beef jowl boudin swine bacon kielbasa shank drumstick shank doner steak porchetta kielbasa frankfurter. Mignon drumstick drumstick hamburger pancetta corned brisket
prosciutto shank ribs loin hamburger. Sausage turkey swine flank ribs corned round hock flank picanha kielbasa chuck rump turkey.
<br>
<br> Ribs ribs corned strip hamburger landjaeger strip ribs round chuck pancetta cupim steak. Beef jowl boudin swine bacon kielbasa shank drumstick shank doner steak porchetta kielbasa frankfurter. Mignon drumstick drumstick hamburger pancetta corned
brisket prosciutto shank ribs loin hamburger. Sausage turkey swine flank ribs corned round hock flank picanha kielbasa chuck rump turkey.
<br>
<br> Ribs ribs corned strip hamburger landjaeger strip ribs round chuck pancetta cupim steak. Beef jowl boudin swine bacon kielbasa shank drumstick shank doner steak porchetta kielbasa frankfurter. Mignon drumstick drumstick hamburger pancetta corned
brisket prosciutto shank ribs loin hamburger. Sausage turkey swine flank ribs corned round hock flank picanha kielbasa chuck rump turkey.
<br>
<br> Ribs ribs corned strip hamburger landjaeger strip ribs round chuck pancetta cupim steak. Beef jowl boudin swine bacon kielbasa shank drumstick shank doner steak porchetta kielbasa frankfurter. Mignon drumstick drumstick hamburger pancetta corned
brisket prosciutto shank ribs loin hamburger. Sausage turkey swine flank ribs corned round hock flank picanha kielbasa chuck rump turkey.
<br>
<br> Ribs ribs corned strip hamburger landjaeger strip ribs round chuck pancetta cupim steak. Beef jowl boudin swine bacon kielbasa shank drumstick shank doner steak porchetta kielbasa frankfurter. Mignon drumstick drumstick hamburger pancetta corned
brisket prosciutto shank ribs loin hamburger. Sausage turkey swine flank ribs corned round hock flank picanha kielbasa chuck rump turkey.
<br>
<br> Ribs ribs corned strip hamburger landjaeger strip ribs round chuck pancetta cupim steak. Beef jowl boudin swine bacon kielbasa shank drumstick shank doner steak porchetta kielbasa frankfurter. Mignon drumstick drumstick hamburger pancetta corned
brisket prosciutto shank ribs loin hamburger. Sausage turkey swine flank ribs corned round hock flank picanha kielbasa chuck rump turkey.
</p>
</div>
<div class="homepage-footer col-sm-12">
<div class="col-sm-3">
Footer
</div>
<div class="col-sm-9">
<p class="footer-description">
Affogato saucer arabica Affogato irish lait cultivar acerbic strong blue mocha mazagran sweet frappuccino. Qui decaffeinated flavour galão Shop beans rich Dark to plunger qui trifecta cup sugar. Dripper ristretto redeye wings pot organic spice frappuccino
cream cup barista Dark pumpkin. Aroma mazagran roast spoon shop flavour Variety Variety spoon robust spoon lait origin. Aftertaste robust single doppio Affogato milk aftertaste percolator Frappuccino siphon macchiato macchiato carajillo.
</p>
</div>
</div>
</div>
</div>
</div>
CSS
body {
font-size: 16px;
background-color: #ddd;
}
.well.survey {
background: #FFF;
padding: 0 0 50px 0;
margin-bottom: 0;
margin-top: 50px;
color: #8591A0;
height:71vh;
overflow: auto;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.survey-container {
margin: 0 100px;
padding-top: 30px;
}
@media (max-width: 768px) {
.survey-container {
margin: 0 50px;
}
}
.homepage-footer {
background-color: #303A40;
padding: 20px 30px 20px 30px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
-webkit-transform: translate3d(0, 0, 0);
position: absolute;
top: 80vh;
width: inherit;
}
.homepage-footer p {
color: #fff;
}
.footer-description {
font-size: 12px;
text-align: justify;
}
【问题讨论】：