固定页脚下的滚动窗口下的页脚

Question

上下文

我正在尝试创建一个适应任何屏幕的页面。此页面包含可滚动部分和固定页脚，始终可见。我正在使用vh（视口高度），以便页面永远不会滚动，只有可滚动容器内的内容。

问题

我似乎无法在每个屏幕的宽度和高度（大屏幕到手机）上完美地对齐页脚。这是我已经尝试过的codepen。

我不明白为什么我的页脚的$sql = " UPDATE diseases SET `UserInput` = '$finalData' WHERE `Name` = '$dname' "; 没有取width: inherit的宽度。似乎在vh（可滚动容器）中使用survey-container而在vh（页脚）中使用height似乎不是可行的方法，但我不知道如何定位它们，例如< em> page 从不滚动（只有容器）。

代码

HTML

top

CSS

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

Answer 1

您的页脚宽度大于survey-container，因为它有position: absolute。这意味着最接近的父级的宽度为position: absolute或position: relative。

要解决此问题，请制作.row课程position: relative。

（请注意，top: 80vh也是相对于您的.row课程，而不是文档的顶部）

Answer 2

你可以通过这种方式调整你的脚本，这只是你的指南，而不是这样，这几乎适用于所有的屏幕，浏览器，这包括可怕的IE 6 也是如此！

您应该查看footer CSS。如果您想保留它，请将其放在父级中，并将position: relative添加到父级。

＆＃13;

＆＃13;

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
body {padding: 0 0 40px;}
p {margin: 0 0 5px; text-align: justify;}
footer {height: 35px; line-height: 35px; position: fixed; bottom: 0; text-align: center; width: 100%; background-color: #ccf;}

＆＃13;

<p>This is a fluid body content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<footer>Footer Here</footer>

＆＃13;

＆＃13;

＆＃13;