[CSS] Rozciąganie i przesuwanie elementów strony pod wpływem zawartości
Ostatnio zmodyfikowano 2014-04-26 20:54
czosnek17 Temat założony przez niniejszego użytkownika |
[CSS] Rozciąganie i przesuwanie elementów strony pod wpływem zawartości » 2014-04-24 22:48:56 Mam layout strony zbudowany na div. W uproszczeniu wygląda tak: index.html <html><head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> <link rel="stylesheet" href="style.css" type="text/css" /></head> <body> <div id="cont"> <div id = "header"> nagłówek </div> <div id = "menu"> menu </div> <div id = "pg"> Lorem ipsum </div> <div class="cl"></div> <div id = "ft"> footer </div> </div> </body> </html> style.css
@charset "UTF-8";
#cont
{
width: 1000px;
margin: 0 auto 0;
}
#header
{
height: 150px;
background: red;
}
#menu
{
width: 200px;
height: 200px;
float: left;
background: yellow;
}
#pg
{
width: 800px;
height: 200px;
background: green;
float: left;
}
#ft
{
background: navy;
height: 20px;
}
.cl
{
clear: both;
}
Teraz to wygląda tak: Chciałbym, aby strona rozciągała się pionowo pod wpływem lorem ipsum, tzn divy pg i menu mają początkowo stałą wartość y. Gdy tekst lorem ipsum się nie mieści, kontenery pg i menu mają się wydłużyć i "popchnąć" footer w dół. W jaki sposób to zrobić? |
|
MrPoxipol |
» 2014-04-25 17:25:47 Zamien height na min-height. |
|
czosnek17 Temat założony przez niniejszego użytkownika |
» 2014-04-25 22:48:30 Działa, ale jak zrobić, żeby div menu też się rozciągał? |
|
MrPoxipol |
» 2014-04-25 22:54:15 Identycznie? :) |
|
czosnek17 Temat założony przez niniejszego użytkownika |
» 2014-04-25 23:01:37 Ale mi chodzi o to, że jak lorem ipsum się rozciągnie na np 400px, to żeby menu też się rozciągnęło. |
|
MrPoxipol |
» 2014-04-25 23:09:55 Nie ustawiaj więc wysokości. Menu i główny div ustaw w tym samym bloku (float:left). |
|
czosnek17 Temat założony przez niniejszego użytkownika |
» 2014-04-25 23:13:27 Jak tak robie, to wielkość menu zależy od ilości jego linijek. |
|
czosnek17 Temat założony przez niniejszego użytkownika |
» 2014-04-25 23:35:06 Chodzi o coś takiego? Jeżeli tak to co dalej z tym zrobić? <div id= "nowy div ?"> <div id = "menu"> menu </div> <div id = "pg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> |
|
| « 1 » 2 3 |