Цвет фона с фиксированной высотой мешает моему потоку документов - PullRequest
Новая
       121

Цвет фона с фиксированной высотой мешает моему потоку документов

0 голосов
/ 04 мая 2020

Мне нужно, чтобы цвет bg был фиксированного размера, и я хочу, чтобы мой #second-div начинался после <hr>. Но эта фиксированная высота bg-color портит мой поток do c, а h1 -s из bg-div появляются над моим #second-div. Есть мысли как это исправить?

Я пытался использовать clearfix, но это не помогает, так как bg-div не имеет поплавков ...

РЕДАКТИРОВАТЬ: указать - мне нужны эти h1-s для переполнения зеленый фон ВОЗМОЖНОЕ РЕШЕНИЕ: я создал еще один div только для fixed-height-bg, а затем дал bg-div отрицательное верхнее поле. Визуально это удовлетворяет моим потребностям, но хотелось узнать, есть ли более простое решение. 

<head>
  <style>
    .bg-div { 
      width: 100%;
      height: 200px;
      background-color: #00FF00; 
    }
  </style>
</head>
<body>
  <div class="bg-div">
    <h1>bg-div-content</h1>
    <h1>bg-div-content</h1>
    <h1>bg-div-content</h1>
    <h1>bg-div-content</h1>
    <h1>bg-div-content</h1>
    <h1>bg-div-content</h1>
    <hr>
  </div>
  <div id="second-div">
    <h1>second div content</h1>
  </div>
</body>

кодовая ссылка с тем же html - css для игры

Ответы [ 3 ]

1 голос
/ 04 мая 2020

Если вам действительно нужен фиксированный цвет фона как часть макета, я бы попробовал абсолютно позиционированный div именно для этой цели. См. этот CodePen для справки 

<div class="bg-block"></div>
<div class="first-div">
  <h1>bg-div-content</h1>
  <h1>bg-div-content</h1>
  <h1>bg-div-content</h1>
  <h1>bg-div-content</h1>
  <h1>bg-div-content</h1>
  <h1>bg-div-content</h1>
  <hr>
</div>
<div id="second-div">
  <h1>second div content</h1>
</div>  

.bg-block { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background-color:#00FF00;
  z-index: -1;
}

ПРИМЕЧАНИЕ: 1. использование нескольких h1 s обычно не рекомендуется, так как h1 подразумевает верхнюю иерархию содержимого 2. использование единицы абсолютного размера для этого типа макета обычно менее гибко, поэтому я бы посоветовал вам рассмотреть другой подход к проектированию, если это возможно.

0 голосов
/ 04 мая 2020

Звучит так, как будто высота, которую вы устанавливаете для bg-div, слишком мала, чтобы вместить все элементы H1, которые вы помещаете в нее. Вы можете уменьшить H1 элементы, установив для font-size что-то меньшее. В качестве альтернативы, если вы не хотите потерять часть содержимого, которое вы поместили в bg-div, вы можете установить overflow: hidden на bg-div. Это предотвратит отображение браузером любого контента bg-div, который в противном случае находился бы за пределами прямоугольника div.

0 голосов
/ 04 мая 2020

если вы сохраняете высоту фиксированной, то содержимое, очевидно, будет переполнено. Это не очень хорошая практика, сделайте height:100% и убедитесь, что она действительно хорошо подходит и является динамичной c в зависимости от содержимого. Ваш html должен быть динамическим c, потому что вы не можете ожидать размер контента в реальном времени.

...