Css: укладка нижнего колонтитула с ростом тела = 100% - PullRequest
Новая
       10

Css: укладка нижнего колонтитула с ростом тела = 100%

0 голосов
/ 04 апреля 2019

У меня есть веб-приложение angularJS с простым шаблоном, например: 

<html>
      <head>
        <link rel="stylesheet" href="style.css" />        
      </head>
    <body id="top">

      <!-- Templates with views will be inserted here -->
      <div class="wrapper" ng-view>
        <div class="language-loaded">    
          <div class="home-top">
            <div class="title-wrapper">
                <h1 class="home-title">Title</h1>   
            </div>
        </div>
        <div>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
        </div>
      </div>
    </div>



    <!-- This is the footer template -->
    <div ng-include src="'partials/footer.html'">          
      <footer id="footer">
        This is the footer
      </footer>
    </div>

Полученная веб-страница имеет вид:

HTML: 

  <body id="top">
    <div class="wrapper">

  </body>

</html>

CSS: 

html, body, .wrapper, .language-loaded, .home-top {height: 100%}
body {  background-color: #F5F5F5}
.home-top {background-color: blue;}
.title-wrapper {
    position: relative;
    top: 39%;
    color: #fff;
  text-align: center;
}

Как вы можете видеть, у меня есть высота: 100% в некоторых компонентах, потому что я хочу, чтобы на главной странице открывалось фоновое изображение, которое занимает 100% высоты.Под этим изображением есть основной контент.Дело в том, что с этой структурой нижний колонтитул отображается чуть ниже фонового изображения над основным содержимым.

Пожалуйста, посмотрите на этот элемент, чтобы более ясно увидеть проблему: https://plnkr.co/edit/gyNOJmc5uzHAEhXwzRuq?p=preview

ЧтоЯ хотел бы разместить нижний колонтитул в конце страницы, как и ожидалось, под всем основным содержанием.

1 Ответ

1 голос
/ 04 апреля 2019

<div><p>content</p>...</div> находится за пределами .home-top с height: 100% и в .language-loaded с 100%.Таким образом, в основном у вас есть контент переполнен .language-loaded.

Если вы не можете изменить структуру HTML, удалите все height: 100% и просто используйте height: 100vh ( единицы просмотра ) на .home-top. 

body {
  background-color: #F5F5F5
}

.home-top {
  height: 100vh;
  background-color: blue;
}

.title-wrapper {
  position: relative;
  top: 39%;
  color: #fff;
  text-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body id="top">
  <div class="wrapper">
    <div ng-show="languageLoaded" class="language-loaded">
      <div class="home-top">
        <div class="title-wrapper">
          <h1 class="home-title">Title</h1>
        </div>
      </div>
      <div>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
      </div>
    </div>
  </div>
  <div>
    <footer id="footer" style="background-color: red">
      This is the footer
    </footer>
  </div>
</body>

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

Нет похожих вопросов

...