Как сделать так, чтобы этот сайт соответствовал размерам экрана?

Question

У меня проблемы с размерами экрана.Я часто использую Bootstrap.

Вот изображения:

Sass источник: `

body
  background: $main-background
  margin: 0
  width: 100%
  height: 100%
  
 .footer
  position: absolute
  color: white
  font-family: Arial
  width: 100%
  height: 100%
  background-color: $plok-orange
  background-repeat: no-repeat
  background-size: 100%
  background-position: 50% 50%
  
  @media screen and (max-width: 1170px)
  min-width: 960px
  .footer
    width: 960px
    
.footer-left
  margin-top: $margin-top-footer
  float: left
  margin-left: 20px

.footer-left h1
  color: $plok-black
  font-size: 30px
  font-family: Helvetica
  font-weight: lighter

.footer-right
  margin-top: $margin-negative-footer
  float: right
  margin-left: 200px

.footer-right h1
  color: $plok-black
  font-size: 30px
  font-family: $font-stack
  font-weight: lighter   

html source:

<div class="jumbotron">
        <h1 class="display-4">..........</h1>
        <p class="lead">........</p>
        <hr class="my-4">
        <p>..........</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </div>
    <div class="footer">
        <div class="footer-left">
            <h1>Preview</h1>
            <div class="row">
                <div class="col-md-2">
                    <img src="images/plokster-art-1.jpg" alt="..." class="img-thumbnail">
                </div>
                <div class="col-md-2">
                    <img src="images/plokster-art-2.jpg" alt="..." class="img-thumbnail">
                </div>
                <div class="col-md-2">
                    <img src="images/plokster-art-3.jpg" alt="..." class="img-thumbnail">
                </div>
                <div class="footer-right">
                    <h1>Contact</h1>
                </div>
                    </form>
                </div>
                </div>
            </div>

Я понимаю, что не тестирую с такой же максимальной / минимальной шириной, но в любом случае мой исходный размер экрана все равно не подходит.Я использую sass.`

Answer 1

Вам нужен стиль вашего корневого элемента jumbotron

Я не совсем уверен, чего вы пытаетесь достичь.Но вот мое взятие.

Поскольку ваш нижний колонтитул - position: absolute, я бы рассмотрел относительного родителя.Попробуйте это в своем корневом классе

.jumbotron {
  position: relative;
  width: 100%;
}

, возможно, стоит рассмотреть возможность использования абсолютного положения в нижнем колонтитуле для его позиции

.footer {
  left: 0; bottom: 0; right: 0;
}

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