Отзывчивый нижний колонтитул не остается внизу страницы - PullRequest
Новая
       20

Отзывчивый нижний колонтитул не остается внизу страницы

0 голосов
/ 30 сентября 2018

Я уже ищу этот форум, но ни одно из решений не работает для меня.Как следует из названия, нижний колонтитул моей страницы не находится внизу.

Вот код: 

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * {
        box-sizing: border-box;
      }

      .menu {
        float: left;
        width: 20%;
      }

      .menuitem {
        padding: 8px;
        margin-top: 7px;
        border-bottom: 1px solid #f1f1f1;
      }

      .main {
        float: left;
        width: 60%;
        padding: 0 20px;
        overflow: hidden;
      }

      .right {
        background-color: lightblue;
        float: left;
        width: 20%;
        padding: 10px 15px;
        margin-top: 7px;
      }

      @media only screen and (max-width:800px) {
        /* For tablets: */
        .main {
          width: 80%;
          padding: 0;
        }
        .right {
          width: 100%;
        }
      }

      @media only screen and (max-width:500px) {
        /* For mobile phones: */
        .menu,
        .main,
        .right {
          width: 100%;
        }
      }

    </style>
  </head>

  <body style="font-family:Verdana;">

    <div style="background-color:#f1f1f1;padding:15px;">
      <h1>Cinque Terre</h1>
      <h3>Resize the browser window</h3>
    </div>

    <div style="overflow:auto">
      <div class="menu">
        <div class="menuitem">The Walk</div>
        <div class="menuitem">Transport</div>
        <div class="menuitem">History</div>
        <div class="menuitem">Gallery</div>
      </div>

      <div class="main">
        <h2>The Walk</h2>
        <p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
        <img src="https://i.imgur.com/NLkubDn.jpg" style="width:25%">
      </div>

      <div class="right">
        <h2>What?</h2>
        <p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
        <h2>Where?</h2>
        <p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
        <h2>Price?</h2>
        <p>The Walk is free!</p>
      </div>
    </div>


    <div style="background-color:#ffd88c;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>

  </body>

</html>

Он работает на мобильных устройствах, но не работает на обычном дисплее.

Вот демонстрационная страница: http://jsfiddle.net/Lwp710be/2/show

и вот код jsfiddle: http://jsfiddle.net/Lwp710be/2/

Ответы [ 2 ]

0 голосов
/ 30 сентября 2018

Лучшим решением было бы использовать CSS Grid , поскольку нижний колонтитул и область основного содержимого являются основными разделами страницы.

Ниже приведена демонстрация, в которой я создалконтекст сетки для класса с именем .container и применение его к элементу body в разметке, затем я обернул основное содержимое в элемент main, чтобы элемент body теперь имел 2 дочерних элементов main иdiv (элемент div - ваш нижний колонтитул), которые оба следуют правилам сетки: 

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

.menu {
  float: left;
  width: 20%;
}

.menuitem {
  padding: 8px;
  margin-top: 7px;
  border-bottom: 1px solid #f1f1f1;
}

.main {
  float: left;
  width: 60%;
  padding: 0 20px;
  overflow: hidden;
}

.right {
  background-color: lightblue;
  float: left;
  width: 20%;
  padding: 10px 15px;
  margin-top: 7px;
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}

@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu,
  .main,
  .right {
    width: 100%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="container" style="font-family:Verdana;">

  <!-- MAIN CONTENT STARTS HERE -->
  <main>
    <div style="background-color:#f1f1f1;padding:15px;">
      <h1>Cinque Terre</h1>
      <h3>Resize the browser window</h3>
    </div>

    <div style="overflow:auto">
      <div class="menu">
        <div class="menuitem">The Walk</div>
        <div class="menuitem">Transport</div>
        <div class="menuitem">History</div>
        <div class="menuitem">Gallery</div>
      </div>

      <div class="main">
        <h2>The Walk</h2>
        <p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
        <img src="https://i.imgur.com/NLkubDn.jpg" style="width:25%">
      </div>

      <div class="right">
        <h2>What?</h2>
        <p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
        <h2>Where?</h2>
        <p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
        <h2>Price?</h2>
        <p>The Walk is free!</p>
      </div>
    </div>
  </main>
  <!-- MAIN CONTENT ENDS HERE -->

  <div style="background-color:#ffd88c;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>

</body>

</html>
0 голосов
/ 30 сентября 2018

Я использую flexbox, чтобы решить это. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

.menu {
  float: left;
  width: 20%;
}
.menuitem {
  padding: 8px;
  margin-top: 7px;
  border-bottom: 1px solid #f1f1f1;
}
.main {
  float: left;
  width: 60%;
  padding: 0 20px;
  overflow: hidden;
}
.right {
  background-color: lightblue;
  float: left;
  width: 20%;
  padding: 10px 15px;
  margin-top: 7px;
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;">

  <div class="content">
    <div style="background-color:#f1f1f1;padding:15px;">
      <h1>Cinque Terre</h1>
      <h3>Resize the browser window</h3>
    </div>

    <div style="overflow:auto">
      <div class="menu">
        <div class="menuitem">The Walk</div>
        <div class="menuitem">Transport</div>
        <div class="menuitem">History</div>
        <div class="menuitem">Gallery</div>
      </div>

      <div class="main">
        <h2>The Walk</h2>
        <p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
        <img src="img_5terre.jpg" style="width:100%">
      </div>

      <div class="right">
        <h2>What?</h2>
        <p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
        <h2>Where?</h2>
        <p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
        <h2>Price?</h2>
        <p>The Walk is free!</p>
      </div>
    </div>
  </div>

  <footer class="footer">This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</footer>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...