Автоматическое растягивание составного CSS-фона по размеру содержимого
-
16-09-2019 - |
Вопрос
Я создаю CSS-сайт и не могу решить эту частичную проблему:
С левой стороны есть окно, которое состоит из трех изображений.Верхнее изображение, среднее изображение (необязательное и растянутое) и нижнее изображение.
Я хочу, чтобы поле слева автоматически растягивалось, если внутри больше содержимого.Это уже работает для правой стороны с моим текущим кодом.(Я поместил оба столбца в контейнер div и установил левое поле на высоту:100.)
Но теперь в левом поле также должно быть содержимое.Это содержимое переполняется, потому что я установил левое поле в положение:абсолютный.Таким образом, это не увеличивает размер.
Мне не удалось получить этот эффект без position:абсолютный, хотя.Я пробовал использовать float и т.д.
Вот пример кода:
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
<div id="bgbottom">
<div id="bgmiddle">
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
С помощью этой таблицы стилей:
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
position: relative;
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
position: absolute;
width: 185px; /* width of the bg images */
height: 100%;
background: url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
position: absolute;
width: 100%;
height: 100%;
background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
position: absolute;
width: 100%;
top: 250px; /* Don't cover top GIF */
bottom: 15px; /* Don't cover bottom GIF */
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
}
Это выглядит примерно так (раскрашено для лучшего понимания):
Желтая часть на самом деле является растянутым изображением, я оставил ее для примера, она работает так, как ожидалось.
Как я могу добавить текст в левое поле, который также растянет его?Или на данный момент это возможно с помощью TABLE вместо CSS?
Редактировать:Решение BitDrink выглядит таким образом в моем браузере (текущий FF)
альтернативный текст http://img502.imageshack.us/img502/1241/layoutsample2.png
Решение
Здесь я могу ошибаться, но то, чего вы пытаетесь достичь здесь, - это два столбца одинаковой высоты, независимо от того, сколько текста находится в левом или правом столбцах.
Столбцы одинаковой высоты с использованием CSS это лучшая CSS-техника для этого, где с помощью фонов и нижних изогнутых краев нужно было бы передать div#vertical stretcher.
Единственный другой известный мне способ сделать два столбца одинаковой высоты - это использовать JavaScript.Видишь Статья группы Filament о настройке равных высот с помощью jQuery.
Другие советы
проблема в абсолютном позиционировании!Если вы хотите автоматически изменить размер (по вертикали) левого окна, просто примените "float:left" к #bgtop!Обратите внимание, что атрибут "min-height" поддерживается не во всех браузерах (например, IE6)!Приведенный ниже код является примером:
<style type="text/css" >
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
float: left;
width: 185px; /* width of the bg images */
height: 100%;
background: #CCC url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
width: 100%;
height: 100%;
background: #666 url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
width: 100%;
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
background-color: #FFF;
border: 1px dotted black;
}
</style>
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
text top
<div id="bgmiddle">
text middle
<div id="bgbottom">
text bottom
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
Вы можете увидеть результат ниже:
4 div (ов) изменяют размер по вертикали в соответствии с их содержимым!