Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > привязка объекта к низу DIV


Автор: stsorel 28.2.2009, 01:04
Здача такая:

есть DIV блок, с начальной висотой X и небольшим куском текста, в нем задан цвет фона, к низу блока привязана кнопка
при переполнении текстом блок розширяется по вертикали, вместе с кнопкой и фоном

как такое можно реализовать (без таблиц!!!)

Автор: MaXL 28.2.2009, 10:12
Если я правильно понял условие, то:
делаем один слой. в нём прописываем нужный min-height, т.е. "начальную высоту X". Затём в нём делаем один слой для текста, у которого прописываем min-height равное min-height главного слоя, минус то, что будет отведено под кнопку. Ну и потом просто кнопку кидаем. Т.е. полуяается так:
Код

#bl {
        min-height: 300px; /* минимальная высота блока */
        width: 200px; /* ширина слоя */
        background: #cccccc; /* цвет фона главного слоя */
    }
    #b2 {
        min-height: 280px;
        background: #bbbbbb; /* цвет фона слоя с текстом */
    }

Код

<div id="bl">
    <div id="b2">
        <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 
        Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>
    </div>
    <input type="button" name="btn1" value="Button" />
</div>

Автор: ksnk 28.2.2009, 12:48
Код

<!-- контейнер на 400 px ширины -->
<div  style="width:400px;">

<!-- распорка на 300 px высоты -->
<div style="overflow:hidden;float:right;width:1px;height:300px"></div>

<!-- основной текст -->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam n...

<!-- финишный батон -->
<div style="float:left;width:100%;">
<input type="button" value ="батон">
</div>
</div>

Автор: stsorel 28.2.2009, 16:21
MaXL, спасибо за совет, но в ІЕ не работает ((( а с закостенелим мышлением закажчиков, которые считают что клиент всегда прав, и пользуются до сих пор IE . . . . . . . . . 

ksnk, спасибо

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)