https://jsfiddle.net/u74vyv7w/

Пожалуйста, обратитесь к фрагменту кода по ссылке выше. Я пытаюсь добиться фиксированного заголовка, фиксированного левого держателя навигации, фиксированного правого держателя контента и прокручиваемого среднего держателя контента (полоса прокрутки появляется в окне браузера, а не в элементе div). Я столкнулся с двумя проблемами:

div.middle {-webkit-calc(100% - 300px);}
  1. Почему слева и справа от среднего держателя контента есть зазор в 8 пикселей? Даже после расчета ширины она не меняется (см. Код выше).

  2. Почему цвет фона среднего держателя контента не заполняет все пространство, когда контент увеличивается и превышает размер экрана?

Stack Overflow не позволяет мне публиковать этот вопрос без фрагмента кода, поэтому разместите HTML-код для справки. Соответствующий код CSS можно найти по ссылке jsfiddle.

<body>
    <div class="container">
        <div class="header">
        </div>
        <div class="content">
            <div class="left">
            </div>
            <div class="middle">
                <p align="right">hello</p>
                <p>hello</p>
                <p align="right">hello</p>
                <p>hello</p>
            </div>
            <div class="right">
            </div>
        </div>
    </div>
</body>
0
Nimish Jain 31 Дек 2017 в 15:21

2 ответа

Лучший ответ

Вы видите разрыв, потому что браузер добавляет ...

body {
 margin: 8px;
}

... по умолчанию.

Вы можете переопределить это в своем CSS.

  1. Высота .middle не увеличивается, потому что вы используете height. Попробуйте вместо этого использовать min-height. Также обратите внимание, что у вас есть поле внизу middle.

скрипка

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

div.container {
  height: 100%;
  width: 100%;
  position: relative;
}

div.header {
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #558c89;
}

div.content {
  margin-top: 50px;
}

div.left,
div.right {
  width: 150px;
  top: 50px;
  bottom: 0;
  position: fixed;
  background-color: #74afad;
}

div.middle {
  margin: 50px 150px;
  background-color: #ececea;
  min-height: 100%;
}

div.content,
div.left,
div.right {
  height: 100%;
}

div.left {
  left: 0;
}

div.right {
  right: 0;
}
<html>

<head>
  <title>Layout</title>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open Sans">
</head>

<body>
  <div class="container">
    <div class="header">
    </div>
    <div class="content">
      <div class="left">
      </div>
      <div class="middle">
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
      </div>
      <div class="right">
      </div>
    </div>
  </div>
</body>

</html>
1
sol 31 Дек 2017 в 12:50

Если вы не запустите «reset css», большинство элементов будут иметь стиль по умолчанию. В вашем случае здесь ваши <p> получили margin и padding

В вашем примере я добавил быстрый, удалив поля и отступы для всех элементов, выполнив этот css

* {
  padding: 0;
  margin: 0;
}

демо

Я бы посмотрел на что-то вроде Нормализовать css

0
Dejan.S 31 Дек 2017 в 12:38