2016-03-27 49 views
5

Tôi đang cố gắng tạo một bộ sưu tập php và đó là lý do tại sao tôi cần một Mặt nạ tốt, nơi các hình ảnh sau này có thể được hiển thị. Tôi muốn Mặt nạ không lớn hơn kích thước màn hình. Ý tôi là, không được cuộn và toàn bộ <body> chỉ cần có chiều rộng và chiều cao của cửa sổ trình duyệt, để mọi đối tượng con trong <body> bị giới hạn ở kích thước khung của trình duyệt và sẽ bị thu nhỏ nếu nó tràn . Tôi đã thử với max-widthmax-height trên <body>, nhưng nó không hoạt động.Làm cách nào để giới hạn chiều rộng và chiều cao tối đa cho kích thước màn hình trong CSS?

Đây là mã của tôi:

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <div id="mother"> 
      <div id="header"> 
       <div id="back-link"> 
        <a href="../">Home</a> 
       </div> 
       <div id="prev"> 
        <a href="">next picture</a> 
       </div> 
       <div id="next"> 
        <a href="">previous picture</a> 
       </div> 
       <div id="headline"> 
        <p class="h2">Our Galery</p> 
       </div> 
      </div> 

      <!-- Content --> 
      <div id="container-bild"> 
       <img src="./bilder/P1130079.JPG" id="img-bild" /> 
      </div> 
     </div> 
    </body> 
</html> 

style.css:

body { 
    max-width: 100%; 
    max-height: 100%; 
} 
/* mother-container */ 
div#mother { 
    max-width: 100%; 
    max-height: 100%; 
    margin: auto; 
} 
/* main-container */ 
#container-bild { 
    max-width: 100%; 
    max-height: 100%; 
} 
/* picture in main-container */ 
#img-bild { 
    max-width: 100%; 
    max-height: 100%; 
    border: 1px solid #280198; 
} 

Thats what it still looks like - I dont want the Page to be bigger than window - click here to see the wrong version!

Trả lời

0

Hãy thử:

html, 
body { 
    height: 100%; 
} 

body { 
    overflow: hidden; 
} 

Bạn có biết có bao nhiêu phần tử con sẽ trong bộ sưu tập của bạn? Nếu số lượng phần tử là tĩnh, bạn có thể chỉ cần đặt thứ nguyên của chúng trong CSS bằng cách sử dụng đơn vị vw và vh. Không có JavaScript liên quan, và các yếu tố sẽ không bao giờ có thể tràn cơ thể của bạn.

+0

Cảm ơn bạn quá, nhưng cách của bạn cũng không phải là những gì tôi đang tìm kiếm, bởi vì nó đúng, với cách của bạn tôi có thể ngăn chặn di chuyển, nhưng vẫn còn một tràn trên trang web ... Tôi muốn trang web của tôi để ngăn chặn từ đó tràn, để nếu một đối tượng cố gắng tràn nó sẽ được thu nhỏ xuống một kích thước phù hợp mà không tràn ... bạn có biết ý tôi không? – hans2020dieter

+0

Đã chỉnh sửa câu trả lời của tôi để đề xuất định kích thước các phần tử con với vw và vh. Điều này sẽ hoạt động nếu các phần tử của thư viện là tĩnh ... nếu bạn đang thêm hoặc trừ các phần tử động, thì JavaScript sẽ là cách duy nhất. –

9

Nếu bạn muốn chiều cao là chính xác 100% của màn hình xem, và cùng với độ rộng, sử dụng

height: 100vh;//100% view height 
width: 100vw;// 100% view width 

.

div { 
 
    background-color: blue; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}
<div>hi</div>

+0

trước hết: cảm ơn câu trả lời nhanh của bạn ... nhưng, xin lỗi, câu trả lời này không giúp tôi rất nhiều, vì vùng chứa < div > của bạn có thể có kích thước màn hình, nhưng hình ảnh trong đó quá lớn để buộc tràn ... để bạn có lại cuộn mà tôi muốn ngăn chặn . Bạn có ý tưởng làm cách nào để buộc vùng chứa < div > vượt quá kích thước cửa sổ màn hình không? Tôi có nghĩa là để làm cho một giới hạn trên tất cả các objekts trong các container < div > rằng họ không thể vượt quá và do đó họ sẽ được thu nhỏ đến một kích thước phù hợp? – hans2020dieter

+0

Mục đích của div và hình ảnh là gì? – k97513

+0

Nếu bạn đang tạo một thư viện, không đặt hình ảnh bên trong div. Đặt div thành "cover" và tạo hình ảnh 'position: absolute'. Sau đó, định vị nó. Ngoài ra, nếu bạn đang thực hiện một thư viện, sau đó làm cho hình ảnh của 'tối đa chiều cao: 90%' hoặc một cái gì đó như thế. – k97513

0

Tôi không chắc chắn nếu điều này là có thể với css, nó có thể được. Tôi đã giải quyết được vấn đề tương tự với javascript:

window.top.innerHeight; 

tải chiều cao có sẵn, loại trừ thanh menu ... của borwser. Xem cách tôi đã làm cho chiều cao, vấn đề của tôi là chân nên ở phía dưới ngay cả khi nội dung đã empty->

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>C-Driver Manager</title> 
<meta name="keywords" content="Aygit,Device,Driver,Surucu,Download,Indir,yedekle,Unknown,Bilinmeyen,Backup,Back-up,stuurprogramma,apparaat,windows,w7,w8,w10,multilanguage,tool,free,gratis,ucretsiz"> 
<meta name="description" content="Windows 7/8/10 Device indentify, Driver backup, Driver info"> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<link rel="icon" href="images/favicon.ico"> 
</head> 

<body onResize="resizecontainer();"> 
    <div class="divtop"> 
     <div class="divtopcontainer"> 
      <div class="divlogo"> 

      </div> 
      <div class="divHmenu"> 
       <style> 
    .mnuHorizontal 
    { 
     list-style:none; 
    } 
    .mnuHorizontal li 
    { 
     float:left; 
    } 

    .mnuHorizontal .activemnu a,.mnuHorizontal li a:hover 
    { 
     background:#00B7EF; 
     border-radius:5px; 
     color:white; 
    } 


    .mnuHorizontal li a 
    { 
     display:inline-block; 
     text-decoration:none; 
     padding:5px 12px; 
     text-align:center; 
     font-weight:bold; 
     color:#020042; 
    } 

    </style> 

<ul class="mnuHorizontal"> 
    <li id="index.php"><a href="index.php">HOME</a></li> 
    <li id="features.php"><a href="features.php">FEATURES</a></li> 
    <li id="download.php" class="activemnu"><a href="download.php">DOWNLOAD</a></li> 
    <li id="contact.php"><a href="contact.php">CONTACT</a></li> 
</ul> 
      </div> 
     </div> 
    </div> 

    <div class="divblueline"></div> 

    <div class="divcontainer"> 
<div style="float:left"> 
    <h2>What is C-Driver Manager</h2> 
    C-Driver Manager is a simple tool that; 
    <ul> 
     <li>displays information about your devices</li> 
     <li>identify unrecognized devices by windows</li> 
     <li>Backups your devices driver</li> 
    </ul> 

<h2>Why C-Driver Manager?</h2> 
<ul> 
    <li>No installation needed</li> 
    <li>No adware</li> 
    <li>No spyware</li> 
    <li>Absolutely freeware</li> 
</ul> 
</div> 
<div> 
    <img alt="" src="images/devmgr5.jpg" height="430" width="700"> 
</div> 

</div> 

    <div class="divblueline"></div> 
    <div class="divbottom"> 
     <div id="chmx"> 
     </div> 
    </div> 
</body> 
    <script> 
     for (i=0;i<document.getElementsByClassName('mnuHorizontal').item(0).children.length; i++) 
     { 
      if (document.getElementsByClassName('mnuHorizontal').item(0).children[i].id == 
       "index.php") 

      { 
       document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = 'activemnu'; 
      } 
      else 
      { 
       document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = ''; 
      } 
     } 

     resizecontainer(); 

     function resizecontainer() 
     { 
      avh  = window.top.innerHeight; 
      dbh  = document.getElementsByClassName('divbottom').length * 
         document.getElementsByClassName('divbottom').item(0).clientHeight; 

      dbt  = document.getElementsByClassName('divtop').length * 
         document.getElementsByClassName('divtop').item(0).clientHeight; 

      dbbl = document.getElementsByClassName('divblueline').length * 
         document.getElementsByClassName('divblueline').item(0).clientHeight; 

      decrh = dbh + dbt + dbbl; 

      document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px'; 
     } 
    </script> 
</html> 

nhìn cho chức năng này bên trong ví dụ trên ->

function resizecontainer() 
     { 
      avh  = window.top.innerHeight; 
      dbh  = document.getElementsByClassName('divbottom').length * 
         document.getElementsByClassName('divbottom').item(0).clientHeight; 

      dbt  = document.getElementsByClassName('divtop').length * 
         document.getElementsByClassName('divtop').item(0).clientHeight; 

      dbbl = document.getElementsByClassName('divblueline').length * 
         document.getElementsByClassName('divblueline').item(0).clientHeight; 

      decrh = dbh + dbt + dbbl; 

      document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px'; 
     } 
+0

được rồi, cảm ơn ... Tôi đang cố gắng hòa hợp với ý tưởng của bạn ^^ bởi vì, thực ra tôi ' m rất xấu tại javascript ... Tôi có nghĩa là tôi đã tìm một cách, mà không có javascript ... nhưng nếu theres không có cách nào xung quanh javascript, nó không thể giúp XD – hans2020dieter

+0

Cố gắng để có được chiều cao có sẵn của bạn và với, loại trừ tất cả các yếu tố khác và điều chỉnh kích thước hình ảnh của bạn với phần còn lại của chiều cao và chiều rộng có sẵn Btw, tôi cũng không phải là quản trị viên web, bên trong stackoverflow u có thể tìm thấy rất nhiều ví dụ javascript. – coban

+0

okay, cảm ơn bạn! :) – hans2020dieter

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