VPF::помогите с блочной версткой - Форум программистов

Ehonod

Дата 16.7.2011, 12:14 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 16.7.2011

Репутация: нет
Всего: нет

Добрый день.

Можно ли див с основным содержимым растягивать по высоте двумя блоками:

два параллельных блока - контент и правое меню. Я не знаю какой из них получится длиннее (где-то текст, а где -то меню), поэтому мне надо, что бы высота основного контейнера определялась высотой бо`льшего блока.

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

Добавлено @ 12:19

Код



<body>
    <div id="wrapper">
        <div id="header">
            <div id='logo'>
                <a href="index.php" title="title"><img src="img/logo.png"></a>
            </div>
            <div id='phone'>
                <p>999 999<br>+8 999 999 99 99</p>
            </div>
            <div id='top_menu'>
                <ul>
                    <li><a href='1.php'>t.menu 1</a></li>
                    <li><a href='2.php'>t.menu 2</a></li>
                    <li><a href='3.php'>t.menu 3</a></li>
                </ul>
            </div>
        </div>
        <div id="container">
                        
            <div id="content">
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>    
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>    
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>    
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>    
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>    
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>    
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>    
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>    
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>    
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>    
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                <p>content-content-content-content-content-content-</p>
                
            </div>
            
            <div id="right">
                <div id='all_about'>
                    <a href='link.php?id=all'>some text</a>
                </div>
                <div id='right_menu'>
                    <ul>
                        <li><a href='1.php'>r.menu1</a></li>
                        <li><a href='2.php'>r.menu2</a></li>
                        <li><a href='3.php'>r.menu3</a></li>
                        <li><a href='3.php'>r.menu4</a></li>
                        <li><a href='3.php'>r.menu5</a></li>
                        <li><a href='3.php'>r.menu6</a></li>
                        <li><a href='3.php'>r.menu7</a></li>
                        
                    </ul>
                </div>
            </div>
            
        </div>        
        <div class="empty"></div>
    </div>
    <div id="footer">
        <div id="copy">
            <p>Created rights и все такое.</p>
        </div>
    </div>
</body>

Код



* {margin: 0; padding: 0;}

a {outline:none;}

html, body {margin:0;padding:0; width: 100%; height: 100%; background-color:#0d0f20; background-image:url(img/html_bg.gif); background-repeat:repeat-X;}

body {width:1200px; }

#wrapper {position:relative; min-height:100%; /*min-height для IE*/ height:auto !important; height:100%; padding:0px; color: #646464; text-align: justify; background-image:url(img/body_bg.jpg); background-color:#10a2b9; background-repeat:repeat-Y;}
    
    #header {position:relative; width:100%; height:400px; background-image:url(img/header_bg.jpg); background-color:#199999; background-repeat:no-repeat;}
        #logo {position:absolute; width:473px; height:316px; top:0px; left:0px;}
            #logo img {border:0px;}
        #phone {position:absolute; top:10px; right:100px; text-align:right;}
        #top_menu {position:absolute; top:327px; right:100px;}
        
    #container {position:relative; width:1000px; margin:15px 0px 20px 198px;}
        #content {position:relative; width:780px; float:left; border:1px solid #ffffff;}
        #right {position:relative; width:200px;  margin-left:799px;}
            #all_about {position:relative; text-align:center;}
            #right_menu
                #right_menu ul {}
                    #right_menu li {list-style-type:none;}
                
    
    #wrapper .empty {height:250px; }

#footer {position:relative; margin-top:-250px; height:250px; width:100%; background-image:url(img/footer_bg.jpg);background-repeat:no-repeat; background-color:#000000;}
    #copy {position:absolute; bottom:10px; right:200px;}
    

/*______________________ body ______________________*/

/*______________________ text ______________________*/

#phone p {font-family:tahoma, verdana; font-size:30px; font-style:italic; color:#d2ff00;}
#phone a {border:0px;}

#top_menu ul {}
#top_menu li {position:relative; margin-left:20px; display:inline;}
#top_menu a:link {font-family:Tahoma; font-size:18px; font-weight:bold; color:#870101; text-decoration:none;}
#top_menu a:hover {color:#ff0000;}
#top_menu a:visited {font-family:Tahoma; font-size:18px; font-weight:bold; color:#ffffff; text-decoration:none;}

#all_about a:link {font-family:Tahoma; font-size:18px; font-weight:bold; color:#ff0000; text-decoration:none;}
#all_about a:hover {text-decoration:underline;}
#all_about a:visited {font-family:Tahoma; font-size:18px; font-weight:bold; color:#ffffff; text-decoration:none;}

#right_menu a {display:block; width:135px; height:41px; margin-top:4px; padding:20px 0px 0px 65px;}
#right_menu a:link {font-family:Tahoma; font-size:18px; font-weight:bold; color:#ffffff; text-decoration:none; background-image:url(img/button.png);}
#right_menu a:hover {background-image:url(img/button_hover.png);}
#right_menu a:visited {font-family:Tahoma; font-size:18px; font-weight:bold; color:#ffffff; text-decoration:none;}

#copy p {font-family:verdana, tahoma; font-size:12px; font-weight:bold; color:#28bdd4;}

Это сообщение отредактировал(а) Ehonod - 16.7.2011, 12:22

SelenIT

Дата 16.7.2011, 16:47 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Всё можно. Float-блоки (в данном случае #content) выпадают из потока, но есть два подхода, как их туда вернуть — "clearfix" и контекст форматирования (чуть подробнее).

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Guedda

Дата 16.7.2011, 19:11 (ссылка)

(нет голосов)

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78

Сильно в код не вдавался, но в твоем случае поможет добавить родительскому диву свойство overflow: auto;
Вот смотри:

Код


<style type="text/css">
#parent {
overflow: auto;
}

#content {
height: 100px;
}

#right {
height: 500px;
}
</style>
...
<div id="parent">
<div id="content">
</div>
<div id="right">
</div>
</div>

в этом случае #parent будет бОльшую высоту (в данном случае - 500px)

--------------------

Ll 2

SelenIT

Дата 16.7.2011, 19:33 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Это и есть один из вариантов создания контекста (другие варианты — display:inline-block/table/table-cell либо задание float самому предку).

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Ehonod

Дата 17.7.2011, 11:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 16.7.2011

Репутация: нет
Всего: нет

Цитата

в твоем случае поможет добавить родительскому диву свойство overflow: auto;

Огромное огромное огромное огромное огромное огромное огромное огромное спасибо!!!
2 недели убил на это!

Миллион раз спасибо!!!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »