CSS basi c макет: фиксированная навигация, растяжение контента, абсолютный колонтитул - PullRequest
Новая
       19

CSS basi c макет: фиксированная навигация, растяжение контента, абсолютный колонтитул

0 голосов
/ 20 апреля 2020

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

У меня есть следующий код, который по какой-то причине можно прокручивать, и после нижнего колонтитула появляется нежелательная неиспользуемая область. .

https://jsfiddle.net/etLx01dj/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .navigation {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 4em;
        background-color: green;
      }

      .content {
        background-color: darkgrey;
        height: 100%;
        margin-top: 4em;
      }

      .footer {
        position: absolute;
        bottom:0;
        left: 0;
        width: 100%;
        height: 3em;
        background-color: red;
      }

    </style>
  </head>
  <body>
      <div class="navigation">
        <p>nav works</p>
      </div>
      <div class="content">
        <p>content works</p>
      </div>
      <div class="footer">
        <p>footer works</p>
      </div>
  </body>
</html>

Бонусный вопрос: можно ли избежать margin-top: 4em для контента при фиксированной навигации?

Заранее спасибо за помощь!

Ответы [ 2 ]

0 голосов
/ 20 апреля 2020

Вот простой способ сделать это, используя flexbox: 

html,
body {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

body>* {
  box-sizing: border-box;
  padding: 1rem;
  width: 100%;
}

.navigation,
.footer {
  flex-grow: 0;
  background-color: #f8f8f8;
  min-height: 3em;
  box-shadow: 0 0 8px 0 rgba(0,0,0,.1), 0 1px 4px 0 rgba(0,0,0,.07), 0 1px 3px -2px rgba(0,0,0,.06);
}
.navigation {
  border-bottom: 1px solid rgba(255,255,255,.85);
}
.footer {
  border-top: 1px solid rgba(255,255,255,.85);
}

.content {
  flex-grow: 1;
  overflow-y: auto;
}

.tall-content {
  height: 200vh;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
      <div class="navigation">
        <div>nav works</div>
      </div>
      <div class="content" contentEditable="true">
        <p> Click and edit (copy/paste/delete) the content, to see how it works with various heights...
        
        <p>Maroon grapple Jolly Roger deadlights schooner gangway aft booty cutlass cackle fruit. Handsomely topgallant doubloon Jack Tar Jack Ketch landlubber or just lubber dance the hempen jig warp jib long clothes. Black spot red ensign bowsprit wench sheet nipperkin line gibbet scuppers careen.

        <p>Matey Yellow Jack furl nipper heave down Sink me ballast boatswain barkadeer bilge water. Brethren of the Coast transom bring a spring upon her cable Davy Jones' Locker draft tender trysail holystone Admiral of the Black jolly boat. Yo-ho-ho careen coxswain Yellow Jack capstan galleon Jack Tar spanker loaded to the gunwalls man-of-war.

        <p>Coffer plunder come about Sea Legs gun Jolly Roger squiffy barkadeer Plate Fleet sloop. Take a caulk knave Pirate Round Sail ho Jack Tar Gold Road topgallant cutlass cog grog. Hands walk the plank quarterdeck maroon aye Spanish Main haul wind boatswain coffer pinnace.

        <p>Maroon grapple Jolly Roger deadlights schooner gangway aft booty cutlass cackle fruit. Handsomely topgallant doubloon Jack Tar Jack Ketch landlubber or just lubber dance the hempen jig warp jib long clothes. Black spot red ensign bowsprit wench sheet nipperkin line gibbet scuppers careen.

        <p>Matey Yellow Jack furl nipper heave down Sink me ballast boatswain barkadeer bilge water. Brethren of the Coast transom bring a spring upon her cable Davy Jones' Locker draft tender trysail holystone Admiral of the Black jolly boat. Yo-ho-ho careen coxswain Yellow Jack capstan galleon Jack Tar spanker loaded to the gunwalls man-of-war.

        <p>Coffer plunder come about Sea Legs gun Jolly Roger squiffy barkadeer Plate Fleet sloop. Take a caulk knave Pirate Round Sail ho Jack Tar Gold Road topgallant cutlass cog grog. Hands walk the plank quarterdeck maroon aye Spanish Main haul wind boatswain coffer pinnace.
        
      </div>
      <div class="footer">
        <div>footer works</div>
      </div>
  </body>
</html>

Нет жестко заданных полей / отступов, нет абсолютного или фиксированного позиционирования. Нижний колонтитул и заголовок имеют flex-grow: 0, а содержимое имеет flex-grow: 1 в сочетании с min-height: 100vh на родительском элементе. Если вам неудобно давать <body> display:flex, используйте обертку, но я могу заверить вас, что она работает в кросс-браузерном режиме.

Очевидно, что вы можете игнорировать темы. Я просто не был поклонником цветов, которые вы выбрали:)

0 голосов
/ 20 апреля 2020

Попробуйте код : 

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .navigation {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 4em;
        background-color: green;
      }

      .content {
        background-color: darkgrey;
        height: 100%;
        margin-top: 4em;
      }

      .footer {
        position: absolute;
        left: 0;
        width: 100%;
        height: 3em;
        background-color: red;
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
      <div class="navigation">
        <p>nav works</p>
      </div>
      <div class="content">
        <p>content works</p>
      </div>
      <div class="footer">
        <p>footer works</p>
      </div>
  </body>
</html>
...