Абсолютное позиционирование и отступ снизу страницы.

Necronomicron · February 4, 2012

Поискал я в интернетах и ничего толкового не нашёл, поэтому решил спросить здесь.

Есть страница, 3 колонки с position:absolute, надо сделать отступ снизу (после самой длинной, это может быть любая из них, не только центральная). На margin реагируют только такие же абсолютно-позиционированные объекты. Если вставлять мои колонки в какой-то блок, он не воспринимает абсолютно-позиционированные объекты как твёрдые объекты (игнорирует их высоту). Вроде как-то решал, но не могу найти (а может и не решал). Пробовал менять на relative - всё едет. Необходимо именно абсолютное позиционирование.

CSS:


@charset "utf-8";
/* CSS Document */

html *{border:none; margin:0; padding:0; outline:none;}
html {font-family:Candara, Verdana, Geneva, sans-serif; font-size:12pt; color:#000;}
body {background:url(../img/crosses.jpg) #fff scroll center repeat;}
ul {list-style-type:none;}
a:link {color:#f5f; text-decoration:none;}
a:hover {color:#f00; text-decoration:underline;}

/*@font-face {font-family:Philosopher; src:url(../fonts/Philosopher.ttf);}*/

/*.container {width:100%;}*/
.header {background:#fdf; position:absolute; width:100%; height:90px; text-align:center;}
.menu {background-color:#fff; position:absolute; top:45px; left:220px; right:220px; border-radius:14px; height:30px; -moz-border-radius:14px; -webkit-border-radius:14px; border:3px solid #f00; font-weight:bold;}
.menu li {display:inline-block; font-size:16pt; margin:0 15px;}
.leftbar, .rightbar {background:rgba(255,247,247,.95); position:absolute; top:90px; width:200px; margin:10px; border-radius:14px; -moz-border-radius:14px; -webkit-border-radius:14px; border:3px solid #f00; padding:8px 12px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; font-weight:bold;}
.leftbar {left:0;}
.rightbar {right:0;}
.leftbar ul li span {font-size:14pt;}
.leftbar ul li ul li {padding-left:16px;}
.content {background-color:rgba(223,223,255,.95); position:absolute; top:90px; left:220px; right:220px; margin:10px 0 50px; border-radius:200px 14px/30px 14px; -moz-border-radius:200px 14px/30px 14px; -webkit-border-radius:200px 14px/30px 14px; border:3px solid #00f; padding:20px 30px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; text-align:justify; text-indent:40px;}
/*.content h1 {text-indent:0; text-align:center;}*/
.footer {background-color:#fdf; width:100%; height:24px; position:fixed; bottom:0; text-align:right; padding:0 10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

HTML:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>~<>~</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!--<div class="container">-->
	<div class="header">
		<h1>Сайт о медицине</h1>
		<ul class="menu">
			<li>Главная</li>
			<li>Главная</li>
			<li>Главная</li>
		</ul>
	</div>
	<div class="leftbar">
		<ul>
			<li><span>Туфтология</span>
				<ul>
					<li><a href="/">Asdasda</a></li>
					<li><a href="/">Bjigug</a></li>
					<li><a href="/">Cgtryj 57 fsdf dfsdfsdf asdas sdasdrtg</a></li>
				</ul>
			</li>
			<li><span>Маразмология</span>
			</li>
			<li><span>Олология</span>
			</li>
		</ul>
	</div>
	<div class="content">
		<h1>Фимоз</h1>
		<p>Фимо?з — невозможность обнажения головки полового члена. Только у 4 % новорожденных мальчиков крайняя плоть настолько подвижна, чтобы полностью можно было открыть головку пениса. В возрасте 6 месяцев головка полового члена открывается у 20 % мальчиков, а в возрасте 3 лет крайняя плоть хорошо смещается и позволяет обнажить головку пениса у 90 % мальчиков. Поэтому детям до 3-х лет не рекомендуется выполнять обрезание в связи с невозможностью обнажения головки полового члена (фимозом). Исключение составляют случаи выраженного воспаления головки пениса (баланит), а также затруднённого мочеиспускания и возникающих в связи с этим осложнений, когда операция рекомендуется в любом возрасте.</p>
		<h1>Фімоз</h1>
		<p>Фімо?з (лат. - phim?sis) - патологічна вузкість препуціального кільця (отвору крайньої плоті, через який виходить головка пенісу).
У 90% хлопчиків крайня плоть при народженні не відкривається. Таке явище називається фізіологічний фімоз, який продовжується до 5 – 6 років. Такий фімоз (якщо, звичайно, відсутні явища запалення головки – баланіт або головки і крайньої плоті – баланопостит) потребує спостереження і не вимагає хірургічного лікування. Для профілактики запального процесу необхідно проводити ретельний та регулярний гігієнічний нагляд. Після 5 – 6 років головку у більшості хлопчиків вже можна відкрити. Проте, якщо не вдається її скільки-небудь оголити, або при цьому виникає сильна перешкода (крайня плоть блідне, напружена, стоншується, з'являється сильний біль або невеликі надриви), то відкриття головки слід негайно припинити і звернутися до лікаря.</p>
		<h1>Фимоз</h1>
		<p>Фимо?з — невозможность обнажения головки полового члена. Только у 4 % новорожденных мальчиков крайняя плоть настолько подвижна, чтобы полностью можно было открыть головку пениса. В возрасте 6 месяцев головка полового члена открывается у 20 % мальчиков, а в возрасте 3 лет крайняя плоть хорошо смещается и позволяет обнажить головку пениса у 90 % мальчиков. Поэтому детям до 3-х лет не рекомендуется выполнять обрезание в связи с невозможностью обнажения головки полового члена (фимозом). Исключение составляют случаи выраженного воспаления головки пениса (баланит), а также затруднённого мочеиспускания и возникающих в связи с этим осложнений, когда операция рекомендуется в любом возрасте.</p>
		<h1>Фімоз</h1>
		<p>Фімо?з (лат. - phim?sis) - патологічна вузкість препуціального кільця (отвору крайньої плоті, через який виходить головка пенісу).
У 90% хлопчиків крайня плоть при народженні не відкривається. Таке явище називається фізіологічний фімоз, який продовжується до 5 – 6 років. Такий фімоз (якщо, звичайно, відсутні явища запалення головки – баланіт або головки і крайньої плоті – баланопостит) потребує спостереження і не вимагає хірургічного лікування. Для профілактики запального процесу необхідно проводити ретельний та регулярний гігієнічний нагляд. Після 5 – 6 років головку у більшості хлопчиків вже можна відкрити. Проте, якщо не вдається її скільки-небудь оголити, або при цьому виникає сильна перешкода (крайня плоть блідне, напружена, стоншується, з'являється сильний біль або невеликі надриви), то відкриття головки слід негайно припинити і звернутися до лікаря.</p>
	</div>
	<div class="rightbar">
		<a href="/">Новая статья</a>
		<a href="/">Предпоследняя статья</a>
		<a href="/">Старая статья</a>
	</div>
<!--</div>-->
<div class="footer"><span>Best viewed without Internet Explorer. 2012 ©</span></div>
</body>
</html>

Edited February 4, 2012 by Necronomicron

Switch74 · February 4, 2012

возможно тебе подойдет этот вариант

Edited February 4, 2012 by Switch74

Necronomicron · February 4, 2012

возможно тебе подойдет этот вариант

Чот так и не понял, где решение моей проблемы.

Switch74 · February 4, 2012

три колонки, футер прижат к низу(не указывалось в задании, но уж такой пример), если одна из колонок становится больше высоты экрана футер съежает ниже. Реализовано без абсолютнопозиционированных блоков


<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
#body{
        position:relative;
        margin:0px auto;
        width:1000px;
        min-height:100%;
        overflow:hidden;}
#header{
}
#content{
        margin:0px 210px;
        padding-bottom:30px;
        background:#ddd;}
#left{
        position:relative;
        float:left;
        padding-bottom:30px;
        width:200px;
        background:#999;}
#right{
        position:relative;
        float:right;
        padding-bottom:30px;
        width:200px;
        background:#999;}
#footer{
        position:absolute;
        left:0px;
        right:0px;
        bottom:0px;
        height:30px;
        background:#bbb;}
</style>
<div id="body">
        <div id="header">
                header
        </div>
        <div id="left">
                left
        </div>
        <div id="right">
                right
        </div>
        <div id="content">
                content
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                content
        </div>
        <div id="footer">
                footer
        </div>
</div>

lexxcode · February 4, 2012

возможно тебе подойдет этот вариант
Чот так и не понял, где решение моей проблемы.

Это как бы вот нужно прочитать типовые макеты, а потом верстать

Necronomicron · February 4, 2012

В общем переделал, вроде пока без проблем.

CSS:


@charset "utf-8";
/* CSS Document */

html *{border:none; margin:0; padding:0; outline:none;}
html {font-family:Candara, Verdana, Geneva, sans-serif; font-size:12pt; color:#000;}
body {background:url(../img/crosses.jpg) #fff scroll center repeat;}
ul {list-style-type:none;}
a:link {color:#f5f; text-decoration:none;}
a:hover {color:#f00; text-decoration:underline;}

/*@font-face {font-family:Philosopher; src:url(../fonts/Philosopher.ttf);}*/

.container {width:100%; position:relative; margin-top:90px; padding:10px 0 55px;}
.header {background:rgba(255,223,223,.95); position:absolute; top:0; width:100%; height:90px; text-align:center;}
.menu {background-color:#fff; position:absolute; top:45px; left:220px; right:220px; border-radius:14px; height:30px; -moz-border-radius:14px; -webkit-border-radius:14px; border:3px solid #f00; font-weight:bold;}
.menu li {display:inline-block; font-size:16pt; margin:0 15px;}
.leftbar, .rightbar {background:rgba(255,247,247,.95); width:200px; margin:0 10px; border-radius:14px; -moz-border-radius:14px; -webkit-border-radius:14px; border:3px solid #f00; padding:8px 12px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; font-weight:bold;}
.leftbar {float:left;}
.rightbar {float:right;}
.leftbar ul li span {font-size:14pt;}
.leftbar ul li ul li {padding-left:16px;}
.content {background-color:rgba(223,223,255,.95); margin:0 220px; border-radius:200px 14px/30px 14px; -moz-border-radius:200px 14px/30px 14px; -webkit-border-radius:200px 14px/30px 14px; border:3px solid #00f; padding:20px 30px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; text-align:justify; text-indent:40px;}
/*.content h1 {text-indent:0; text-align:center;}*/
.footer {background-color:#fdf; width:100%; height:24px; position:fixed; bottom:0; text-align:right; padding:0 10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

HTML:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>~<>~</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="header">
	<h1>Сайт о медицине</h1>
	<ul class="menu">
		<li>Главная</li>
		<li>Главная</li>
		<li>Главная</li>
	</ul>
</div>
<div class="container">
	<div class="leftbar">
		<ul>
			<li><span>Туфтология</span>
				<ul>
					<li><a href="/">Asdasda</a></li>
					<li><a href="/">Bjigug</a></li>
					<li><a href="/">Cgtryj 57 fsdf dfsdfsdf asdas sdasdrtg</a></li>
				</ul>
			</li>
			<li><span>Маразмология</span>
			</li>
			<li><span>Олология</span>
			</li>
		</ul>
	</div>
	<div class="rightbar">
		<a href="/">Новая статья</a>
		<a href="/">Предпоследняя статья</a>
		<a href="/">Старая статья</a>
	</div>
	<div class="content">
		<h1>Фимоз</h1>
		<p>Фимо?з — невозможность обнажения головки полового члена. Только у 4 % новорожденных мальчиков крайняя плоть настолько подвижна, чтобы полностью можно было открыть головку пениса. В возрасте 6 месяцев головка полового члена открывается у 20 % мальчиков, а в возрасте 3 лет крайняя плоть хорошо смещается и позволяет обнажить головку пениса у 90 % мальчиков. Поэтому детям до 3-х лет не рекомендуется выполнять обрезание в связи с невозможностью обнажения головки полового члена (фимозом). Исключение составляют случаи выраженного воспаления головки пениса (баланит), а также затруднённого мочеиспускания и возникающих в связи с этим осложнений, когда операция рекомендуется в любом возрасте.</p>
		<h1>Фімоз</h1>
		<p>Фімо?з (лат. - phim?sis) - патологічна вузкість препуціального кільця (отвору крайньої плоті, через який виходить головка пенісу).
У 90% хлопчиків крайня плоть при народженні не відкривається. Таке явище називається фізіологічний фімоз, який продовжується до 5 – 6 років. Такий фімоз (якщо, звичайно, відсутні явища запалення головки – баланіт або головки і крайньої плоті – баланопостит) потребує спостереження і не вимагає хірургічного лікування. Для профілактики запального процесу необхідно проводити ретельний та регулярний гігієнічний нагляд. Після 5 – 6 років головку у більшості хлопчиків вже можна відкрити. Проте, якщо не вдається її скільки-небудь оголити, або при цьому виникає сильна перешкода (крайня плоть блідне, напружена, стоншується, з'являється сильний біль або невеликі надриви), то відкриття головки слід негайно припинити і звернутися до лікаря.</p>
		<h1>Фимоз</h1>
		<p>Фимо?з — невозможность обнажения головки полового члена. Только у 4 % новорожденных мальчиков крайняя плоть настолько подвижна, чтобы полностью можно было открыть головку пениса. В возрасте 6 месяцев головка полового члена открывается у 20 % мальчиков, а в возрасте 3 лет крайняя плоть хорошо смещается и позволяет обнажить головку пениса у 90 % мальчиков. Поэтому детям до 3-х лет не рекомендуется выполнять обрезание в связи с невозможностью обнажения головки полового члена (фимозом). Исключение составляют случаи выраженного воспаления головки пениса (баланит), а также затруднённого мочеиспускания и возникающих в связи с этим осложнений, когда операция рекомендуется в любом возрасте.</p>
		<h1>Фімоз</h1>
		<p>Фімо?з (лат. - phim?sis) - патологічна вузкість препуціального кільця (отвору крайньої плоті, через який виходить головка пенісу).
У 90% хлопчиків крайня плоть при народженні не відкривається. Таке явище називається фізіологічний фімоз, який продовжується до 5 – 6 років. Такий фімоз (якщо, звичайно, відсутні явища запалення головки – баланіт або головки і крайньої плоті – баланопостит) потребує спостереження і не вимагає хірургічного лікування. Для профілактики запального процесу необхідно проводити ретельний та регулярний гігієнічний нагляд. Після 5 – 6 років головку у більшості хлопчиків вже можна відкрити. Проте, якщо не вдається її скільки-небудь оголити, або при цьому виникає сильна перешкода (крайня плоть блідне, напружена, стоншується, з'являється сильний біль або невеликі надриви), то відкриття головки слід негайно припинити і звернутися до лікаря.</p>
	</div>
</div>
<div class="footer">
	<span>Best viewed without Internet Explorer. 2012 ©</span>
</div>
</body>
</html>

Sign In

Абсолютное позиционирование и отступ снизу страницы.

Question

Necronomicron

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

Necronomicron

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

lexxcode

Link to comment

Share on other sites

Necronomicron

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information