Форум

bes · #11 (**permalink**) 13.09.2013, 19:34

твои тестовые примеры работают в точности так, как ты описываешь, поэтому всё у тебя работает

для начала можешь открыть для себя тег style, position: absolute|relative, bottom: 0px, гугл

valyan · #12 (**permalink**) 15.09.2013, 22:02

Делаю вот так

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #main {
            position: relative;
            height: 100%;
            border: solid 1px blue;
            min-height: 100%;
        }

        #sidebar {
            position: absolute;
            top: 50px;
            left: 0px;
            width: 30%;
            height: 100%;
            border: solid 1px red;
        }

        #content {
            position: absolute;
            top: 50px;
            right: 0px;
            width: 70%;
            height: 100%;
            border: solid 1px green;
        }

        #message {
            position: absolute;
            bottom: 0px;
            right: 0px;
            width: 100%;
            height: 10%;
            border: solid 1px black;
        }

        #header {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            border: solid 1px yellow;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="header"></div>
        <div id="sidebar">сидебар</div>
        <div id="content">
            контент
            <div id="message">мессаге</div>
        </div>
    </div>
</body>
</html>

но div-sidebar, div-content, div id-message выходят за границы div-main. Если убрать у div-sidebar, div-content top: 50px, то они накладываются на div-header. Как вариант уменьшить у этих div'ов height, но хотелось, чтобы заполняли всю область, чтобы у других пользователей нормально отображалось.

bes · #13 (**permalink**) 15.09.2013, 23:49

опиши для каждого из блоков (header, footer, content, sidebar): что должно произойти, когда высота их содержимого превысит их высоту

а также header, footer должны ли быть всё время на экране или просто являются крайними

valyan · #14 (**permalink**) 16.09.2013, 08:23

Сообщение от bes

опиши для каждого из блоков (header, footer, content, sidebar): что должно произойти, когда высота их содержимого превысит их высоту

header, footer - здесь тест в блоках фиксированный, т.е. высота их содержимого никогда не привысит их высоту.
content, sidebar - ну тут должен появиться скролл, overflow: auto

Сообщение от bes

а также header, footer должны ли быть всё время на экране или просто являются крайними

header - должен быть всегда, footer - по клику по ссылке, которая будет находиться в sidebar.

bes · #15 (**permalink**) 16.09.2013, 20:11

Сообщение от valyan

header - должен быть всегда, footer - по клику по ссылке

так пойдёт?

<!doctype html>
<style>
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}
#header {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	background: red;
	z-index: 100;
}
#content {
	position: relative;
	height: 100%;
	border: solid 1px green;
	padding-top: 1em;
	padding-bottom: 1em;
}
#footer {
	position: fixed;
	left: 0px;
	bottom: -2em;
	width: 100%;
	background: yellow;
}
</style>
<div id="header">header</div>
<div id="content">
	<a href="#" class="sh">show/hide footer</a>
</div>
<div id="footer">footer</div>
<script>
(function () {
	var content = document.getElementById("content");
	for (var i = 1; i <= 100; i++) {
		content.innerHTML += "<br/>" + i;
	}
	document.getElementsByClassName("sh")[0].onclick = function () {
		var fs = document.getElementById("footer").style; 
		if (fs.bottom == "0em") {
			fs.bottom = "-2em";
		} else {
			fs.bottom = "0em";
		}
		
	}
})();
</script>

css · #16 (**permalink**) 16.09.2013, 23:33

Я не ахти какой спец в css (если что, мой ник к каскадным таблицам стилей не имеет никакого отношения), но, если я верно помню, то display:block заставляет див занимать всю доступную область. И ещё надо бы обнулить стили.
И ещё я бы добавила:

*{box-sizing:border-box;}

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

valyan · #17 (**permalink**) 17.09.2013, 08:19

Сообщение от bes

так пойдёт?

Не совсем то. Мне нужно получить что-то похожее на то, что я приводил в сообщении №12

ksa · #18 (**permalink**) 18.09.2013, 09:23

Сообщение от valyan

Ну допустим не в таблице, как это сделать с помощью дивов

1000р и я сделаю тебе макет...

valyan · #19 (**permalink**) 18.09.2013, 16:47

Сообщение от ksa

1000р и я сделаю тебе макет...

нее, я сам помучаюсь.

ksa · #20 (**permalink**) 18.09.2013, 19:35

Сообщение от valyan

я сам помучаюсь

Не нужно мучаться... Книжки начинай читать.

Форум

Справочник

Discord чат

Курсы javascript