X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> 2а DIV'а прижаты к низу экрана
diakon
diakon
Topic Starter сообщение 2.11.2015, 0:18; Ответить: diakon
Сообщение #1


Добрый вечер.
Подскажите, как сверстать HTML чтоб 2а DIV'а были прижаты к низу экрана. Причем выстоа DIV'ов не фиксированная - меняется в зависимости от контента в этих блоках.
Примерно так выглядеть должно: http://clip2net.com/s/3pHiD9J
Все, что я смог сделать это такое: http://clip2net.com/s/3pHiWSe
Код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<style type="text/css">

.wrap {
top:100%;
width: 100%;
background: #555;
height: 100%;
}
.left, .right {
display: inline-block;
width: 100%;
margin-right: -100%;
vertical-align: bottom;
}
.right {
text-align: right;
}
.left a, .right a { display: inline-block; position: relative; }
.left a { width: 200px; height: 100px; background: green; }
.right a { width: 100px; height: 200px; background: pink; }

</style>
</head>

<body>

<div class="wrap">
<div class="left"><a href="#">Левый блок</a></div><div class="right"><a href="#">Правый блок</a></div>
</div>

Пожалуйста, подскажите как быть и заранее спасибо всем кто поможет!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 2.11.2015, 11:10; Ответить: Degradator
Сообщение #2


bottom: 0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
diakon
diakon
Topic Starter сообщение 2.11.2015, 21:48; Ответить: diakon
Сообщение #3


(Degradator @ 2.11.2015, 13:10) *
bottom: 0


Повтыкал во все классы, но ничего не изменилось
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 3.11.2015, 5:29; Ответить: Den1xxx
Сообщение #4


(diakon @ 2.11.2015, 23:48) *
bottom: 0
Повтыкал во все классы, но ничего не изменилось

Position самих блоков должна быть relative или absolute, иначе bottom не сработает.
По умолчанию position:static
А .wrap не имеет всю высоту страницы, потому что корневые body и html меньше.
Мало того, вообще код может не работать, потому что ошибки: не закрыты html и body
Должно быть как-то так: http://jsfiddle.net/Den1xxx/t47o7z5c/1/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<style type="text/css">
html,body{
width: 100%;
height: 100%;
padding:0;
margin:0;
}
.wrap {
min-height: 100%;
background: #555;
}
.left, .right {
width: 50%;
bottom:0;
position: absolute;
height: 100px;
text-align: center;
line-height:100px;
}
.left {
left:0;
background: green;
}
.right {
right:0;
background: pink;
height: 200px;
}

</style>
</head>

<body>

<div class="wrap">
<div class="left"><a href="#">Левый блок</a></div><div class="right"><a href="#">Правый блок</a></div>
</div>
</body>
</html>


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) От какого экрана будут меньше уставать глаза OLED или IPS?
3 metvekot 984 12.3.2024, 16:25
автор: MisterBit
Открытая тема (нет новых ответов) Подборка экрана к ноутбук
12 L1nk_321 2534 5.3.2024, 14:10
автор: AlenaHead
Открытая тема (нет новых ответов) Моя div-ная верстка соответствует ли стандартам
Хотелось бы конструктивной критики
10 muratastana 1545 14.1.2023, 1:16
автор: xweb
Открытая тема (нет новых ответов) Прижать к низу экрана
2 sergei_burg 5390 2.9.2018, 23:17
автор: -dkflbr-
Открытая тема (нет новых ответов) DIV'ы в строку
0 RedEclipse 5463 29.9.2016, 17:53
автор: -RedEclipse-


 



RSS Текстовая версия Сейчас: 29.3.2024, 19:57
Дизайн