Разработка сайта простая

Так вот, как мой маленький веб-сайт я создал, но у меня есть 1 проблема.Разработка сайта простая

Веб-сайт настолько мал, что я хочу, чтобы он заполнил всю страницу.

Сайт: http://postimg.org/image/zfhnqvunb/

HTML КОД:

<html> 
    <head> 
     <title>Office Hunters</title> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 
    <body> 
     <div id="container"> 
     <div id="header"> 
     <h1>Office Hunters</h1> 
     </div> 
     <div id="content"> 
     <div id="nav"> 
     <h3>Website Navigation</h3> 
     <ul> 
      <li><a class="selected" href="">Home</a></li> 
      <li><a href="">About</a></li> 
      <li><a href="">Contact Us</a></li> 
     </ul> 
     </div> 
     <div id="main"> 
     <h2>Home Page</h2> 
     <p> Paragrah 12uey234u3hrdheywhgfhuhwefdghuwyhf</p> 
     <p> heurdfhuergfhuegfuefyuegf</p> 
     <p> 2gu1eqgu23geu32gheiu3gey</p> 
     </div> 
     <div id="footer"> 
     Copyright &copy; 2014 Nicholas Jojo 
     </div> 
    </body> 
</html>

CSS:

body { 
background-color: #DF7401; 
} 
a { 
text-decoration: none; 
color: blue; 
} 
h1, h2, h3 { 
margin: 0; 
} 
#container { 
background-color: white; 
width: 800px; 
margin-left: auto 
margin-right: auto 
} 
#header{ 
background-color: #8A2908; 
text-align: center; 
color: white; 
padding: 10px; 
} 
#content { 
padding: 10px; 
} 
#nav { 
width: 180px; 
float: left; 
} 
#nav ul { 
list-style-type: none; 
padding: 0; 
} 
#nav .selected { 
font-weight: bold; 
} 
#main { 
width: 600px; 
float: right; 
} 
#footer { 
clear: both; 
padding: 10px; 
background-color: #9999999; 
color: white; 
text-align: right; 
}

Как я могу изменить содержание по размеру окна?

Можете ли вы отредактировать часть кода, чтобы помочь мне?

Я действительно застрял, и мне нужно это фиксированная :(.

Спасибо!

-Nick.

источник

2015-05-23 Nick Nicholas

#container имеет фиксированную ширину (800 пикселей), так что он не может получить . любой больше, чем удалить эту строку (width: 800px;) и она будет расширяться, чтобы охватить всю ширину

О высоте:. Я предполагаю, что вы хотите #content занимать всю высоту страницы чтобы достичь этого, у вас есть. добавить height: 100% в #content и все его родительские элементы, вплоть до html.

html, body, #container, #content { 
    height: 100%; 
}

источник

2015-05-23 12:46:44

насчет высоты? –

Измените свою ширину с фиксированных сумм на проценты. Например»

#container { 
    background-color: white; 
    width: 100%; 
    margin-left: auto 
    margin-right: auto 
} 

#main { 
    width: 80%px; 
float: right; 
}

и т.д.

источник

2015-05-23 12:47:59 nomistic

Разработка сайта простая

ответ

Смежные вопросы