Bố cục full màn hình bị kéo giãn khi thêm 1 bố cục khác?

#1

Tiêu đề hơi khó hiểu ha ! :smiley: .Ý mình là khi tình chỉnh 1 bố cục full màn hình.(Không post hình được vì mình là “người mới” T_T)

Phần code html:

<body>
	<div id="background"></div>
</body>

Phần code css:

*{
	margin:0px;
	padding:0px;
}

#background
{
	width:1366px;
	height:662px;
	background-image:url(Images/a.jpg);
	background-repeat:no-repeat;

}

(Sẵn tiện chỉ mình cách viết code css trên đây luộn nha ^^)

Nhưng khi mình chèn thêm 1 bố cục nữa thì nó lại bị như thế này:

Error.jpg1366×768 491 KB

Phần code html:

	<body>
		<div id="background"></div>
		<div id="div"></div>
	</body>

CSS:

*{
	margin:0px;
	padding:0px;
}

#background
{
	width:1366px;
	height:662px;
	background-image:url(Images/a.jpg);
	background-repeat:no-repeat;

}

#div
{
width:30px;
height:50px;

}

Giải thích giùm mình vì sao nó lại bị như vậy và chỉ cho mình luôn cách khắc phục với!Cảm ơn trước nhé ! ^^

#2

Nhiều code mà lại liên quan đến view, bạn paste cái code vào đây nhé, và từ sau cũng nên làm thế, để mọi người xem được luôn: https://jsfiddle.net/

#3

Vậy làm sao khắc phục lỗi trên thế bạn ?Code trên kia đầy đủ mà !

#4

Màn hình tự dưng có thêm scroll bar mặc dù bạn cho kích thước full màn hình bởi vì bạn đặt width là 1366px. Nếu bạn đặt là 100% hoặc không đặt gì cả thì sẽ không sao. Vì mặc định, độ rộng của thẻ div là độ rộng của cái chứa nó, trừ đi padding, border các kiểu, trong trường hợp này thì không có padding, border nên div sẽ full màn hình.
Còn height, để cho nó là 100% thì bạn không thể đo chiều cao màn hình là bao nhiêu xong rồi gõ vào được. Để chiều cao đúng chuẩn 100% kích thước màn hình thì bạn phải học về position trong css hoặc là tác động bằng javascript.

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?