Помогите разобраться!

hrupin · March 21, 2012

Не могу ни как понять!

HTML,Body 100% все хорошо;

Только в CSS заношу #conteiner внизу появляется отступ и прокрутка!

HTML


<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Block</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<script type="text/javascript"> 

function fontSize() {
	var width = 1500; // ширина, от которой идет отсчет
	var fontSize = 16; // минимальный размер шрифта
	var bodyWidth = $('html').width();
	var multiplier = bodyWidth / width;
	if ($('html').width() >= width) fontSize = Math.floor(fontSize * multiplier);
	$('body').css({fontSize: fontSize+'px'});
}
$(function() { fontSize(); });
$(window).resize(function() { fontSize(); });

</script> 




</head>

<body>
	<div id="conteiner"></div>
</body>
</html>

CSS



html, body, div
{ 
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

html, body
{
	width:100%;
	height:100%;
	outline:solid 2px #F00;
}

#conteiner
{
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
	outline:solid 2px #F0F;
}

Switch74 · March 21, 2012

1. Зачем вам


#conteiner
{
        margin: 0;
        padding: 0;
}

вы ведь это уже указали для div

2. в каком браузере появляется скролл? у меня в хроме все норм.

и зачем вам этот скрипт с изменением шрифта, em уже не устраивает

http://habrahabr.ru/post/42151/

hrupin · March 21, 2012

1 Я уже не знаю что делать! Пробую ставить margin и padding всем!

2 Google Chrom 17.0.963.79 и Firefox 10.0.2.

3 Про em интересная статья спасибо!

Switch74 · March 21, 2012

возможно вас устроит такой вариант


<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Block</title>
<style>
html,body{margin:0px;padding:0px;height:100%;}
#conteiner{position:relative;min-height:100%;}
#header{height:100px;	background:#0f0;}
#content{margin-bottom:100px;	background:#0ff;}
#footer{position:absolute;bottom:0px;width:100%;height:100px;	background:#00f;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>

</script>
</head>
<body>
        <div id="conteiner">
			<div id="header">header</div>
			<div id="content">content</div>
			<div id="footer">footer</div>
		</div>
</body>
</html>

hrupin · March 21, 2012

Прокрутка к сожалению все равно осталась !

Но самое главное я хочу понять почему такое происходит!

Может у меня с браузером что-то не так?

Самое интересное что я попросил знакомого посмотреть у него тоже нет прокрутки?!

Edited March 21, 2012 by hrupin

Switch74 · March 21, 2012

возможно у тебя с браузером что-то не так, посмотри код страницы, которую я тебе дал, если там есть что-то кроме того, что в html файле, значит у тебя браузеры что-то дописывают. С помощью просмотра кода элемента можно выяснить что это, где и сколько занимает места

возможно это вирус

Edited March 21, 2012 by Switch74

hrupin · March 22, 2012

Спасибо!

В коде ничего не добавляется, но то что это браузеры это точно!

Может кого-то поймал!

А то если честно я уже веру в жизнь терять начал!

Switch74 · March 22, 2012

у мя тут ща подобная фигня, один блок уходит вниз на пару пикселей, хотя в стилях все чисто и не понятно почему этот гад так делает

hrupin · March 22, 2012

Может смогу помочь?

(я конечно не специалист, только учусь)

Switch74 · March 22, 2012

я уже решил эту проблему, только так и не понял почему он так делал

hrupin · March 22, 2012

Прикольно!

Я не понял, Вы не поняли! Но задачи решили!

Sign In

Помогите разобраться!

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information