CSS: выравнивание по изображениям ниже гибкой высоты содержимого div

У меня есть сайт, который имеет довольно сложный нижний колонтитул, см. http://www.roadsafetyforchildren.co.uk/, не совсем уверен, как попытаться построить его:

Нижняя сноска

Я разделил изображение на две части, первая часть ниже должна быть горизонтально центрирована, но сидеть ниже содержимого: Введите описание изображения здесь

Вторая часть должна повторяться горизонтально, но оставаться в соответствии с изображением выше. Введите описание изображения здесь

Поэтому два изображения должны выглядеть так же, как первое изображение на в самом начале вопроса.

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

Как я могу выровнять два изображения с гибким содержимым div над ним?

P. s есть много ответов, но не думаю, что некоторые из них имеют понять вопрос.

5 2
css photoshop

5 ответов:

Мне кажется прямо вперед, вам понадобятся два дива: 

<div id="content">
     <div id="inner_content">
         <!-- Append image to very bottom -->
         <img src="city" width="" height="" alt="" />
     </div>
     <!-- Background image of hills goes here -->
</div>

CSS прямолинейен..

#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }
1

Попробуйте это:

html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}
1

Независимо от <div> содержимого должно быть height:auto и иметь фоновое изображение высотой пять или около того пикселей любой ширины и должно повторяться-y в css, а <div class="footer"> должно быть float:left. Таким образом, нижний колонтитул всегда будет находиться ниже содержимого, и независимо от высоты содержимого будет иметь повторяющийся фон.

Нет необходимости возиться с PS, за исключением создания образа bg для контента.

Это будет образ bg для content div, и repeat-y, поэтому он повторяется сверху вниз:

И изображение нижнего колонтитула:

Введите описание изображения здесь

И если вы сделаете изображение 'background repeat' png, вы можете сделать тень непрозрачной, чтобы приспособить изменение в изображении body bg.

1

Можно расположить фон внутри элемента: 

div#footer {
    background: url('roadpic.jpg') bottom center no-repeat;
}


<div id="content">your content goes here</div>
<div id="footer">...</div>

Который будет держать нижний колонтитул div ниже содержания в любое время.

0

Вам понадобится общая точка привязки для обоих фонов. Между горизонтально изменяемым окном и областью содержимого, которая составляет менее 100% ширины окна, единственной точкой, которая может оставаться постоянной между двумя контейнерами, является горизонтальный центр тела.

Таким образом, ваш фон холмов должен быть сосредоточен на корпусе или каком-либо другом контейнере, который имеет 100% ширины окна. Изображение дороги может быть либо фиксированным-положение внутри контейнера фиксированной ширины по центру (показано на рис. пример ниже), или центрирован внутри центрированного контейнера переменной ширины.

Результирующий CSS будет выглядеть примерно так: 

div#wrapper {
  width: 100%;
  background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
  width: 800px;
  margin: 0 auto;
  /* background can be offset to the left or right if the width is fixed
     if not it must be centred */
  background: url(road.png) right bottom no-repeat;
}

И HTML:

<body>
  <div id="wrapper">
    <div id="content">
      <p>Some content here</p>
    </div> <!-- content -->
  </div> <!-- wrapper -->
</body>

Фоны обоих контейнеров будут иметь одну и ту же точку привязки, и они будут двигаться вместе, когда окно будет изменено!

Поскольку #content является дочерним элементом #wrapper, они будут выровнены по вертикали, поскольку #wrapper будет становиться выше, когда #content становится выше (если только #content не является плавающей точкой, в этом случае у вас будет чтобы использовать: after clearing trick; или если #content является position: absolute, вам нужно будет выровнять их вручную или с помощью javascript).

0