Хранить место в html-макетах

Сегодня мой вопрос спрашивает, как я мог бы сделать макет страницы html неизменным даже для любого другого пропорционального размера экрана. Например, я создаю HTML-страницу на 15,6" 16: размер экрана 9 отношения, и я хочу, чтобы сделать его остаются теми же, когда изменение размеров экранаХранить место в html-макетах

Вот пример:.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#header { 
    background-color:black; 
    color:white; 
    text-align:center; 
    padding:5px; 
} 
#nav { 
    line-height:30px; 
    background-color:#eeeeee; 
    height:300px; 
    width:100px; 
    float:left; 
    padding:5px;   
} 
#section { 
    width:350px; 
    float:left; 
    padding:10px;   
} 
#footer { 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    padding:5px;  
} 
</style> 
</head> 
<body> 

<div id="header"> 
<h1>City Gallery</h1> 
</div> 

<div id="nav"> 
London<br> 
Paris<br> 
Tokyo<br> 
</div> 

<div id="section"> 
<h2>London</h2> 
<p> 
London is the capital city of England. It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants. 
</p> 
<p> 
Standing on the River Thames, London has been a major settlement for two millennia, 
its history going back to its founding by the Romans, who named it Londinium. 
</p> 
</div> 

<div id="footer"> 
</div> 

</body> 
</html>

так что теперь я хочу, чтобы колонтитулы остаться на дне, так что да, как бы я это сделать?

источник

2015-11-16 Sushi Is Awesome

Отправьте несколько фотографий о том, чего вы хотите достичь. –

Не имеет значения –

Заменить колонтитул CSS с этим одним

#footer { 
    background-color: black; 
    color: white; 
    text-align: center; 
    padding: 5px; 
    bottom: 2px; 
    position: fixed; 
    width: 100%; 
}

И полный код должен быть

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#header { 
    background-color:black; 
    color:white; 
    text-align:center; 
    padding:5px; 
} 
#nav { 
    line-height:30px; 
    background-color:#eeeeee; 
    height:300px; 
    width:100px; 
    float:left; 
    padding:5px;   
} 
#section { 
    width:350px; 
    float:left; 
    padding:10px;   
} 
#footer { 
    background-color: black; 
    color: white; 
    text-align: center; 
    padding: 5px; 
    bottom: 2px; 
    position: fixed; 
    width: 100%; 
} 
</style> 
</head> 
<body> 

<div id="header"> 
<h1>City Gallery</h1> 
</div> 

<div id="nav"> 
London<br> 
Paris<br> 
Tokyo<br> 
</div> 

<div id="section"> 
<h2>London</h2> 
<p> 
London is the capital city of England. It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants. 
</p> 
<p> 
Standing on the River Thames, London has been a major settlement for two millennia, 
its history going back to its founding by the Romans, who named it Londinium. 
</p> 
</div> 

<div id="footer"> 
</div> 

</body> 
</html>

источник

2015-11-16 18:22:10 Firefog

Не совсем уверен, что вы хотите получить, Neverthless вы можете установить определенные правила, основанные на Аспект-отношения эс выходного устройства:

... 

@media screen and (device-aspect-ratio: 16/9) { 
.foo { 
... 
    } 
} 
@media screen and (device-aspect-ratio: 4/3) { 
.foo { 
... 
    } 
}

и так далее ...

есть другие способы добиться такого рода преобразований, на мой взгляд, самые простые запросы СМИ.

источник

2015-11-16 18:31:15 holden

Хранить место в html-макетах

ответ

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