CSS Cách đặt chiều cao div 100% trừ nPx

199

Tôi có một div Wrapper bao gồm 2 div nằm cạnh nhau. Trên container này tôi có một div chứa tiêu đề của tôi. Div của trình bao bọc phải là 100% trừ đi chiều cao của tiêu đề. Tiêu đề là khoảng 60 px. Điều này là cố định. Vì vậy, câu hỏi của tôi là: làm cách nào để đặt chiều cao div của trình bao bọc của tôi là 100% trừ 60 px?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

css height

— Martijn
nguồn

16

Tôi thực sự muốn w3c xem xét thêm một số giá trị trừ thuộc tính hằng vào chiều rộng, họ quên bao gồm các đường viền theo chiều rộng nhưng họ nên thay đổi định nghĩa hầu hết các hack CSS sẽ biến mất nếu hai điều này có sẵn.

— samarjit samanta

79

Đây là một css hoạt động, được thử nghiệm trong Firefox / IE7 / Safari / Chrome / Opera.

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

"overflow-y" không được w3c chấp thuận, nhưng mọi trình duyệt chính đều hỗ trợ nó. Hai div #left và #right của bạn sẽ hiển thị thanh cuộn dọc nếu nội dung của chúng quá cao.

Để điều này hoạt động trong IE7, bạn phải kích hoạt chế độ tuân thủ tiêu chuẩn bằng cách thêm DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
	*{margin:0px;padding:0px;overflow:hidden}
	div{position:absolute}
	div#header{top:0px;left:0px;right:0px;height:60px}
	div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
	div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
	div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
  <div id="left"><div style="height:1000px">high content</div></div>
  <div id="right"></div>
</div>
</body>

Mở rộng đoạn trích

— Alsciende
nguồn

Nó hoạt động trong FF, nhưng tôi không làm cho nó hoạt động trong IE7. Tôi chỉ thấy Mã 'Tiêu đề': <div id = "tiêu đề"> Tiêu đề </ div> <div id = "trình bao bọc"> <div id = "left"> Trái </ div> <div id = "right"> Phải </ div> </ div>

— Martijn

Bạn đã kích hoạt chế độ tuân thủ tiêu chuẩn? Tôi sẽ thêm một trang ví dụ trong phản hồi của tôi.

— Alsciende

1

Ngoài ra, nếu bạn cần đặt các div này ở giữa trang hoặc bất kỳ nơi nào khác, chỉ cần bọc chúng trong div div container và đặt position: relativetrên container. Sau đó đặt container bất cứ nơi nào bạn thích trên trang.

— Ông bà

Thế còn div bên trong, chẳng hạn bên trong #left nếu tôi muốn 2 div với độ cao tương ứng là 40% và 60% thì sao?

— TecHunter

Có một lý do cụ thể là tại sao px được chỉ định trên 0 tham số giá trị không?

— Cassandra

274

Trong CSS3 bạn có thể sử dụng

height: calc(100% - 60px);

— libjup
nguồn

25

Hãy chắc chắn rằng bạn có không gian trước và sau dấu "-". Firefox cần phải có không gian trước dấu "-".

— Codler

7

hoàn hảo. tôi không biết CSS3 có thể làm điều này.

— Tom Beech

Ồ chính xác những gì tôi muốn Cảm ơn.

— Sandhu

1

Điều này thật tuyệt vời

— Mirko

47

Nếu bạn cần hỗ trợ IE6, hãy sử dụng JavaScript để quản lý kích thước của div trình bao bọc (đặt vị trí của phần tử bằng pixel sau khi đọc kích thước cửa sổ). Nếu bạn không muốn sử dụng JavaScript, thì điều này không thể thực hiện được. Có cách giải quyết nhưng mong đợi một hoặc hai tuần để làm cho nó hoạt động trong mọi trường hợp và trong mọi trình duyệt.

Đối với các trình duyệt hiện đại khác, sử dụng css này:

position: absolute;
top: 60px;
bottom: 0px;

— Aaron Digulla
nguồn

Trang web chỉ tương thích với IE 7. Khi tôi sử dụng chiều cao: 100% và đầu trang: 60px; Tôi vẫn het một thanh cuộn. Tôi có thể cuộn 60px xuống.

— Martijn

4

Không chỉ định chiều cao, sử dụng trên cùng và dưới cùng và để trình duyệt tính chiều cao.

— Aaron Digulla

Nhưng tôi muốn trang của mình có chiều cao tối đa 100% trừ 60px; Nếu nội dung lớn hơn thế, tôi muốn cuộn thanh trong div bằng cách sử dụng overflow: scroll;

— Martijn

4

Đối với một thanh cuộn, thêm một div bên trong trình bao bọc hoàn toàn và thực hiện tràn đó: cuộn;

— Aaron Digulla

Lưu ý rằng do lỗi trong IE7, điều này vẫn có thể thất bại. Nếu bạn không thể làm cho nó hoạt động, hãy sử dụng JavaScript. Tôi biết, bạn không thích nó, nhưng cân nhắc với một tuần làm việc với những con bọ kỳ quặc.

— Aaron Digulla

6

tuyệt vời ... bây giờ tôi đã ngừng sử dụng% he he he ... ngoại trừ thùng chứa chính như hình dưới đây:

<div id="divContainer">
    <div id="divHeader">
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
        </div>
        <div id="divContentRight">
        </div>
    </div>
    <div id="divFooter">
    </div>
</div>

và đây là css:

#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

tôi đã thử nghiệm điều này trong tất cả các trình duyệt đã biết và đang hoạt động tốt. Có bất kỳ nhược điểm sử dụng cách này?

— Jayaveer
nguồn

4

Bạn có thể làm một cái gì đó như chiều cao: calc (100% - nPx); ví dụ chiều cao: calc (100% - 70px);

— DrB
nguồn

2

div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

Đảm bảo trong khi sử dụng ít hơn

height: ~calc(100% - 60px);

Nếu không thì sẽ không biên dịch chính xác

— Bố Sourav
nguồn

0

Điều này không trả lời chính xác câu hỏi như được đặt ra, nhưng nó tạo ra hiệu ứng hình ảnh tương tự mà bạn đang cố gắng đạt được.

<style>

body {
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
}

#header {
  position:absolute;
  top:0;
  height:60px;
  width:100%;
}

#wrapper {
  height:100%;
  width:100%;
}
</style>

— Noel Walters
nguồn

0

Trong ví dụ này, bạn có thể xác định các khu vực khác nhau:

<html>
<style>
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
    background-color:blue;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    bottom: 0px;
    background-color:red;
}
#divContentCenter {
    position: absolute;
    top: 0px;
    left: 200px;
    bottom: 0px;
    right:200px;
    background-color:yellow;
}
#divContentRight {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width:200px;
    background-color:red;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:blue;
}
</style>
<body >

<div id="divContainer">
    <div id="divHeader"> top
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">left
        </div>
        <div id="divContentCenter">center
        </div>
        <div id="divContentRight">right
        </div>
    </div>
    <div id="divFooter">bottom
    </div>
</div>

</body>
</html>

— Renzo Ciot
nguồn

0

Tôi chưa thấy bất cứ điều gì như thế này được đăng, nhưng tôi nghĩ tôi đã đưa nó ra khỏi đó.

<div class="main">
<header>Header</header>
<div class="content">Content</div>

Sau đó, CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.main {
    height: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

header {
    height: 50px;
    margin-top: -50px;
    width: 100%;
    background-color: #5078a5;
}

.content {
    height: 100%;
    background-color: #999999;
}

Đây là một jsfiddle làm việc

Lưu ý: Tôi không biết khả năng tương thích của trình duyệt là gì cho việc này. Tôi chỉ chơi xung quanh với các giải pháp thay thế và điều này dường như hoạt động tốt.

— Tự do
nguồn

-1

Sử dụng một div trình bao bọc bên ngoài được đặt thành 100% và sau đó div trình bao bọc bên trong của bạn bây giờ 100% có liên quan đến điều đó.

Tôi nghĩ chắc chắn điều này đã từng làm việc cho tôi, nhưng dường như không phải:

<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper"  style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
  <div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text 

on the left</div>
  <div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the 

right</div>
</div>
</div>
</body>
</html>

— Cade Roux
nguồn

Có thể đưa ra một ví dụ về điều đó. Tôi không hiểu

— Martijn

Tôi đã đăng những gì tôi đang nghĩ, nhưng tôi không thể làm cho nó hoạt động sớm / muộn. Có lẽ nếu tôi ngủ thêm một chút.

— Cade Roux

-1

Nếu bạn không muốn sử dụng định vị tuyệt đối và tất cả nhạc jazz đó, đây là cách khắc phục tôi muốn sử dụng:

html của bạn:

<body>    
   <div id="header"></div>
   <div id="wrapper"></div>
</body>

css của bạn:

body {
     height:100%;
     padding-top:60px;
}
#header {
     margin-top:60px;
     height:60px;
}
#wrapper {
     height:100%;
}

— scotsqueakscoot
nguồn

1

Tôi không nghĩ rằng điều này làm việc như mong đợi. Đầu tiên #headernên là margin-top:-60px;. Thứ hai, height:100%có nghĩa là chiều cao sẽ là 100% chiều cao của các phần tử cha, không bao gồm lề, phần đệm và đường viền. Tùy thuộc vào cài đặt cuộn của bạn, điều này sẽ làm cho các thanh cuộn xuất hiện hoặc nội dung của bạn bị cắt.

— Kylos