Автоматическое растягивание составного CSS-фона по размеру содержимого

StackOverflow https://stackoverflow.com/questions/1677845

  •  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 */
}

Это выглядит примерно так (раскрашено для лучшего понимания):

alt text

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

Как я могу добавить текст в левое поле, который также растянет его?Или на данный момент это возможно с помощью 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>

Вы можете увидеть результат ниже:

alt text

4 div (ов) изменяют размер по вертикали в соответствии с их содержимым!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top