Tôi có một thanh điều hướng ở phía bên trái của trang của mình và tôi muốn nó kéo dài đến 100% chiều cao của trang. Không chỉ chiều cao của chế độ xem, mà bao gồm các khu vực bị ẩn cho đến khi bạn cuộn. Tôi không muốn sử dụng javascript để thực hiện điều này.
Nó có thể được thực hiện trong HTML / CSS không?
Câu trả lời:
Đây là giải pháp cuối cùng tôi đã đưa ra khi sử dụng div làm thùng chứa cho nền động.
z-indexsử dụng không nền.lefthoặc rightcho một cột chiều cao đầy đủ.tophoặc bottomcho một hàng chiều rộng đầy đủ.EDIT 1: CSS bên dưới đã được chỉnh sửa vì nó không hiển thị chính xác trong FF và Chrome. chuyển position:relativesang HTML và đặt phần thân height:100%thay vì min-height:100%.
EDIT 2: Đã thêm ý kiến bổ sung cho CSS. Đã thêm một số hướng dẫn ở trên.
CSS:
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}Các html:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>Tại sao?
html{min-height:100%;position:relative;}Không có điều này, DIV của bộ chứa đám mây sẽ bị xóa khỏi bối cảnh bố cục của HTML. position: relativeđảm bảo rằng DIV vẫn nằm trong hộp HTML khi nó được vẽ sao cho bottom:0liên quan đến đáy hộp HTML. Bạn cũng có thể sử dụng height:100%trên bộ chứa đám mây vì giờ đây nó đề cập đến chiều cao của thẻ HTML chứ không phải chế độ xem.
htmlphần tử. Tại sao vậy?
heightlà nói 'bạn cao thế này; không hơn không kém.' Có nghĩa là nó sẽ là chiều cao của khung nhìn. Chúng tôi muốn nó ít nhất phải cao bằng khung nhìn hoặc cao hơn. min-heightlàm điều này độc đáo.
<html>và định vị cho khung nhìn là hai điều riêng biệt. Cảm ơn bạn!
Với HTML5, cách dễ nhất chỉ đơn giản là làm height: 100vh. Trong đó 'vh' là viết tắt của chiều cao khung nhìn của cửa sổ trình duyệt. Đáp ứng thay đổi kích thước của trình duyệt và thiết bị di động.
vw.
Tôi đã có một vấn đề tương tự và giải pháp là làm điều này:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}Tôi muốn có một div tập trung vào trang với chiều cao 100% chiều cao trang, vì vậy tổng giải pháp của tôi là:
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}Bạn có thể cần phải làm cho một phần tử cha (hoặc đơn giản là 'cơ thể') có position: relative;
cloud-container?
Bạn có thể gian lận bằng cách sử dụng Cột Faux Hoặc bạn có thể sử dụng một số thủ thuật CSS
Thật đơn giản khi sử dụng bảng:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>Khi DIV được giới thiệu, mọi người rất sợ những cái bàn đến nỗi DIV tội nghiệp trở thành cây búa ẩn dụ.
Sử dụng vị trí tuyệt đối. Lưu ý rằng đây không phải là cách chúng ta thường sử dụng để sử dụng vị trí tuyệt đối, đòi hỏi phải đặt thủ công hoặc có các hộp thoại nổi. Điều này sẽ tự động kéo dài khi bạn thay đổi kích thước cửa sổ hoặc nội dung. Tôi tin rằng điều này đòi hỏi chế độ tiêu chuẩn nhưng sẽ hoạt động trong IE6 trở lên.
Chỉ cần thay thế div bằng id 'thecontent' bằng nội dung của bạn (chiều cao được chỉ định chỉ để minh họa, bạn không phải chỉ định chiều cao trên nội dung thực tế.
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>Cách thức hoạt động của nó là div bên ngoài hoạt động như một điểm tham chiếu cho thanh điều hướng. Div bên ngoài được kéo dài bởi nội dung của div 'nội dung'. Thanh điều hướng sử dụng định vị tuyệt đối để tự kéo dài ra theo chiều cao của cha mẹ. Đối với căn chỉnh ngang, chúng tôi làm cho div nội dung tự bù đắp bằng cùng chiều rộng của thanh điều hướng.
Điều này được thực hiện dễ dàng hơn nhiều với mô hình hộp flex CSS3, nhưng chưa có trong IE và có một số đặc điểm riêng của nó.
Nếu bạn đang nhắm mục tiêu các trình duyệt hiện đại hơn, cuộc sống có thể rất đơn giản. thử:
.elem{
height: 100vh;
}nếu bạn cần nó ở 50% trang, thay 100 bằng 50.
Tôi muốn bao gồm toàn bộ trang web trước khi nhắc một cửa sổ bật lên phương thức. Tôi đã thử nhiều phương pháp bằng CSS và Javascript nhưng không có phương pháp nào giúp được cho đến khi tôi tìm ra giải pháp sau. Nó làm việc cho tôi, tôi hy vọng nó cũng giúp bạn.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>Chúc may mắn ;-)
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
document.body.onload = function () {
var textcontrol = document.getElementById("page");
textcontrol.style.height = (window.innerHeight) + 'px';
}<html>
<head><title></title></head>
<body>
<div id="page" style="background:green;">
</div>
</body>
</html>Đơn giản, chỉ cần gói nó trong một bảng div ...
HTML:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>CSS:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>