| ksa | 19.09.2013 08:58 |
Цитата:
|
Сообщение от valyan
Что посоветуете почитать?
|
Там очень доходчиво и на примерах объясняют...
div-header, div-content, dic-footer в ячейке таблицы
Здравствуйте. Никак не пойму как мне сделать - есть ячейка, в этой ячейке сделать div-header, div-content("резиновый"), div-footer. div-header и div-footer постоянной, заданной величины, div-content чтобы растягивался между ними.
Сейчас сделано так Код:
#content_mess<table width='100%' height='100%' id='mes_dialog' style='border-collapse: collapse;'> <tr> <td style='padding-left: 20px;'><font style='color: #2878af; font-size: 21px; font-family: Segoe_light;'>family</font><br/>последнее сообщение: 23.09 в 11-23</td> <td align='right' valign='top' style='padding-right: 20px;'><font style='color: #2878af; font-family: Segoe_light;'>в сети</font></td> </tr> <tr> <td colspan='2'><div id='content_mess'><div class='line-1'></div></div></td>" </tr> <tr id='tr_comments' align='center' valign='middle' bgcolor='#E8E8E8'>" <td style='padding: 15px 5px 15px 10px' ><textarea id='comments' rows='1' cols='70'>Мухаха</textarea></td>" + <td style='padding: 15px 10px 15px 5px' ><button id='send_mess'><font style='font-family: Segoe_light;'>Отправить</font></button></td> </tr> </table> Заранее спасибо! |
Цитата:
|
Вложений: 1
Вот там, где выделено разными цветами. Сейчас я это делаю с помощью таблицы(см. сообщение №1), т.е. таблица в таблице.
|
Что посоветуете?
|
Цитата:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td height="53" colspan="2"> </td>
</tr>
<tr>
<td width="23%"> </td>
<td width="77%"><div id="header">
<div id="content" style=" border: 1px solid black;">Здесь располагается содержимое div c id "header"</div>
</div>
<div id="content" style=" border: 1px solid green;">Здесь располагается содержимое div c id "content"</div>
<div id="footer" style=" border: 1px solid red;">Здесь располагается содержимое div c id "footer"</div></td>
</tr>
</table>
</body>
</html>
Только div c id "header" должен быть вверху ячейки, div c id "footer" внизу ячейки, div c id "content" - растягиваться между ними. |
Цитата:
Цитата:
как растягиваться, он и так у тебя растянут между ними |
Цитата:
Цитата:
|
Цитата:
Поскольку ты попадаешь на проблему "как сделать див на всю область резиновой ячейки"... |
Цитата:
<div id="main" style="border: 1px solid black; width: 100%; height: 100%"> <div id="header" style="border: 1px solid red; height: 10%"></div> <div id="content" style="border: 1px solid green; height: 80%"></div> <div id="footer" style="border: 1px solid blue; height: 10%"></div> </div> Как это сделать? |
твои тестовые примеры работают в точности так, как ты описываешь, поэтому всё у тебя работает ;)
для начала можешь открыть для себя тег style, position: absolute|relative, bottom: 0px, гугл |
Делаю вот так
<!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, но хотелось, чтобы заполняли всю область, чтобы у других пользователей нормально отображалось. |
опиши для каждого из блоков (header, footer, content, sidebar): что должно произойти, когда высота их содержимого превысит их высоту
а также header, footer должны ли быть всё время на экране или просто являются крайними |
Цитата:
content, sidebar - ну тут должен появиться скролл, overflow: auto Цитата:
|
Цитата:
<!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 (если что, мой ник к каскадным таблицам стилей не имеет никакого отношения), но, если я верно помню, то display:block заставляет див занимать всю доступную область. И ещё надо бы обнулить стили.
И ещё я бы добавила:
*{box-sizing:border-box;}
Последнее я добавляю, чтоб не манаться с просчётом всяких мэржинов и пэддингов. |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Там очень доходчиво и на примерах объясняют... |
<!DOCTYPE HTML>
<html>
<head>
<style>
div.main {
border: 5px solid #111;
display: table;
height: 500px;
width: 500px;
}
div.main > div {
display: table-row;
}
div.header {
background: blue;
height: 100px;
}
div.content {
background: red;
/*height: 100%;*/
}
div.footer {
background: green;
height: 100px;
}
</style>
</head>
<body>
<div class="main">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
|
ksa, не бойтесь;)
Ruslan_xDD, спасибо! |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 16:46. |