Jump to content
  • 0

Проблемы с заливкой фоном


Dimanchik87
 Share

Question

Здравсвуйте всем!Я совсем начинающий верстальщик,помогите пожалуйста решить такую проблему:есть три колонки,хедер и футер,футер по умолчанию должен быть прижат к низу,при большом количестве контента сдвигаться вниз.Я написал следующий код,но не могу решить проблему с фоном для колонок(нужно чтобы фон был на всю колонку независимо от контента).Очень жду вашей помощи.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Страница Васи Пупкина</title>

</head>

<style type="text/css">

html,body{

margin:0;

padding:0;

height:100%;

}

#header{

height:50px;

text-align:center;

background:#cf9;

}

#all{

min-height:100%;

margin-bottom:-100px;

}

#left{

float:left;

width:200px;

background:#cf3;

}

#right{

float:right;

width:100px;

background:#f3c;

}

#content{

margin:0 auto;

color:#fff;

background:#ccc;

padding-bottom:100px;

}

#footer{

height:100px;

background:#c63;

}

</style>

<body>

<div id="all">

<div id="header">Добро пожаловать на мою экпериментальную страничку!</div>

<div id="left">ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ</div>

<div id="right">ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ</div>

<div id="content">kgheg ero zdfb afduh fdjbh afbjzfd zdfbj fj f'vbh bvjzndf;kjz hfvjzbf vf' zfdz fd'bh zfjzdf'bh fd jhz fdhzdf bzdfjv zdfjv zfjv zfvh zfjv;z i</div>

</div>

<div id="footer">© Вася Пупкин </div>

</body>

</html>

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Колонки - это слои, высота которых зависит от контента. Другими словами, фон будет виден пока есть какой-то контент внутри слоя.

Что касается футера внизу - http://forum.htmlbook.ru/index.php?showtopic=5870

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy