Đặt kích thước của trang HTML và cửa sổ trình duyệt

Tôi có một phần tử div có ID = "vùng chứa". Tôi muốn đặt thành phần này là kích thước của khu vực có thể xem trong cửa sổ trình duyệt. Tôi đang sử dụng JS sau để làm như vậy.Đặt kích thước của trang HTML và cửa sổ trình duyệt

var container= document.getElementById("container"); 
container.style.height=(window.innerHeight); 
container.style.width=window.innerWidth;

Tuy nhiên, kích thước cửa sổ trình duyệt lớn hơn kích thước có thể xem và thanh cuộn ngang và dọc xuất hiện. Tôi làm cách nào để trang HTML của mình vừa với cửa sổ trình duyệt mà không cần thanh cuộn?

EDIT:

Tôi về cơ bản hỏi, làm thế nào tôi có thể làm cho kích thước tài liệu giống với kích thước khung nhìn?

Nguồn

2012-03-01 moesef

Điều này sẽ hiệu quả.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Hello World</title> 
     <style> 
      html, body { 
       width: 100%; 
       height: 100%; 
       margin: 0; 
       padding: 0; 
       background-color: green; 
      } 
      #container { 
       width: inherit; 
       height: inherit; 
       margin: 0; 
       padding: 0; 
       background-color: pink; 
      } 
      h1 { 
       margin: 0; 
       padding: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <h1>Hello World</h1> 
     </div> 
    </body> 
</html>

Màu nền là ở đó để bạn có thể xem cách hoạt động. Sao chép mã này vào một tệp và mở nó trong trình duyệt của bạn. Hãy thử chơi xung quanh với CSS một chút và xem những gì sẽ xảy ra.

width: inherit; height: inherit; kéo chiều rộng và chiều cao từ phần tử gốc. Điều này nên là mặc định và không thực sự cần thiết.

Thử xóa khối CSS h1 { ... } và xem điều gì sẽ xảy ra. Bạn có thể nhận thấy bố cục phản ứng theo cách kỳ lạ. Điều này là do phần tử h1 ảnh hưởng đến bố cục của vùng chứa của nó. Bạn có thể ngăn chặn điều này bằng cách tuyên bố overflow: hidden; trên thùng chứa hoặc cơ thể.

Tôi cũng khuyên bạn nên đọc một số bài trên CSS Box Model.

Nguồn

2012-03-01 05:48:32 twaddington

Đó là phần tử con của "vùng chứa" đã mang lại cho tôi các vấn đề giống như bạn đã đề xuất. gọi tốt. Cảm ơn! – moesef

Bạn có thể sử dụng width: 100%; trong css của mình.

Nguồn

2012-03-01 03:59:12 yvoyer

đã thử. vẫn làm cho kích thước tài liệu lớn hơn kích thước khung nhìn. – moesef

<html> 
<head > 
<title>Welcome</title>  
<style type="text/css"> 
#maincontainer 
{ 
top:0px; 
padding-top:0; 
margin:auto; position:relative; 
width:950px; 
height:100%; 
} 
    </style> 
    </head> 
<body> 
<div id="maincontainer "> 
</div> 
</body> 
</html>

Nguồn

2013-08-13 11:12:40

Đặt kích thước của trang HTML và cửa sổ trình duyệt

Trả lời

Các vấn đề liên quan