ไม่ว่าเนื้อหาจะเป็นอย่างไร
เป็นไปได้ที่จะทำเช่นนี้?
คำตอบ:
สิ่งนี้ใช้ได้สำหรับฉันเสมอ:
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#container {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">some content</div>
</body>นี่อาจเป็นวิธีที่ง่ายที่สุดในการแก้ไขปัญหานี้ จำเป็นต้องตั้งค่าสี่คุณสมบัติ CSS (แม้ว่าหนึ่งในนั้นจะทำให้ IE มีความสุขเท่านั้น)
นี่คือทางออกของฉันในการสร้าง div แบบเต็มหน้าจอโดยใช้ CSS บริสุทธิ์ จะแสดง div แบบเต็มหน้าจอที่ยังคงอยู่ในการเลื่อน และถ้าเนื้อหาของหน้าพอดีกับหน้าจอหน้านั้นจะไม่แสดงแถบเลื่อน
ผ่านการทดสอบใน IE9 +, Firefox 13+, Chrome 21+
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title> Fullscreen Div </title>
<style>
.overlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(51,51,51,0.7);
z-index: 10;
}
</style>
</head>
<body>
<div class='overlay'>Selectable text</div>
<p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>นี่เป็นวิธีที่มีเสถียรภาพที่สุด (และง่าย) ในการทำและใช้งานได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด
.fullscreen {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
background: lime; /* Just to visualize the extent */
}<div class="fullscreen">
Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.
</div>ผ่านการทดสอบการทำงานใน Firefox, Chrome, Opera, Vivaldi, IE7 + (ขึ้นอยู่กับการจำลองใน IE11)
position: fixed; top: 0; left: 0; width: 100%; height: 100%;ใช้งานได้จริงในเบราว์เซอร์รุ่นเก่าอย่างไม่มีที่ติเช่นกัน
วิธีที่ดีที่สุดที่จะทำเช่นนี้กับเบราว์เซอร์ที่ทันสมัยที่จะทำให้การใช้งานความยาว Viewport ร้อยละลดลงกลับไปที่ความยาวร้อยละปกติสำหรับเบราว์เซอร์ที่ไม่สนับสนุนหน่วยงานเหล่านั้น
Viewport- เปอร์เซ็นต์ความยาวขึ้นอยู่กับความยาวของวิวพอร์ตเอง สองหน่วยที่เราจะใช้ที่นี่คือvh(ความสูงวิวพอร์ต) และvw(ความกว้างวิวพอร์ต) 100vhเท่ากับ 100% ของความสูงของวิวพอร์ตและ100vwเท่ากับ 100% ของความกว้างของวิวพอร์ต
สมมติว่า HTML ต่อไปนี้:
<body>
<div></div>
</body>คุณสามารถใช้สิ่งต่อไปนี้:
html, body, div {
/* Height and width fallback for older browsers. */
height: 100%;
width: 100%;
/* Set the height to match that of the viewport. */
height: 100vh;
/* Set the width to match that of the viewport. */
width: 100vw;
/* Remove any browser-default margins. */
margin: 0;
}นี่คือตัวอย่างของJSFiddleซึ่งแสดงdivองค์ประกอบที่เติมทั้งความสูงและความกว้างของเฟรมผลลัพธ์ หากคุณปรับขนาดกรอบผลลัพธ์divองค์ประกอบจะปรับขนาดตามนั้น
ฉันไม่มี IE Josh คุณช่วยทดสอบสิ่งนี้ให้ฉันได้ไหม ขอบคุณ
<html>
<head>
<title>Hellomoto</title>
<style text="text/javascript">
.hellomoto
{
background-color:#ccc;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
}
body
{
background-color:#ff00ff;
padding:0px;
margin:0px;
width:100%;
height:100%;
overflow:hidden;
}
.text
{
background-color:#cc00cc;
height:800px;
width:500px;
}
</style>
</head>
<body>
<div class="hellomoto">
<div class="text">hellomoto</div>
</div>
</body>
</html>position: fixedแทนหากหน้าสามารถเลื่อนได้ แต่โปรดทราบว่ามันไม่สามารถใช้งานได้ในเบราว์เซอร์มือถือบางรุ่นcaniuse.com/#feat=css-fixed
สิ่งที่ผมพบว่าวิธีที่สง่างามที่ดีที่สุดคือเช่นต่อไปนี้เคล็ดลับมากที่สุดนี่คือการทำให้'sdivposition: fixed
.mask {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: contain;
}<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<div class="mask"></div>
</body>
</html>
เปลี่ยนbodyองค์ประกอบเป็น a flex containerและdiva เป็นflex item:
body {
display: flex;
height: 100vh;
margin: 0;
}
div {
flex: 1;
background: tan;
}<div></div>vhนี่คือวิธีการแก้ปัญหาที่สั้นที่สุดบนพื้นฐานของ โปรดทราบว่าvhจะไม่ได้รับการสนับสนุนในเบราว์เซอร์รุ่นเก่าบางรุ่น
CSS:
div {
width: 100%;
height: 100vh;
}HTML:
<div>This div is fullscreen :)</div>นี่คือเคล็ดลับที่ฉันใช้ ดีสำหรับการออกแบบที่ตอบสนองได้ดี ทำงานได้อย่างสมบูรณ์แบบเมื่อผู้ใช้พยายามที่จะยุ่งกับการปรับขนาดเบราว์เซอร์
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#container {
position: absolute;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="container">some content</div>
</body>น่าเสียดายที่heightคุณสมบัติใน CSS ไม่น่าเชื่อถือเท่าที่ควร ดังนั้นจาวาสคริปต์จะต้องใช้เพื่อตั้งค่ารูปแบบความสูงขององค์ประกอบที่เป็นปัญหากับความสูงของวิวพอร์ตผู้ใช้ และสามารถทำได้โดยไม่มีการกำหนดตำแหน่งที่แน่นอน ...
<!DOCTYPE html>
<html>
<head>
<title>Test by Josh</title>
<style type="text/css">
* { padding:0; margin:0; }
#test { background:#aaa; height:100%; width:100%; }
</style>
<script type="text/javascript">
window.onload = function() {
var height = getViewportHeight();
alert("This is what it looks like before the Javascript. Click OK to set the height.");
if(height > 0)
document.getElementById("test").style.height = height + "px";
}
function getViewportHeight() {
var h = 0;
if(self.innerHeight)
h = window.innerHeight;
else if(document.documentElement && document.documentElement.clientHeight)
h = document.documentElement.clientHeight;
else if(document.body)
h = document.body.clientHeight;
return h;
}
</script>
</head>
<body>
<div id="test">
<h1>Test</h1>
</div>
</body>
</html>$(window).height();จะเป็นความคิดที่ดีที่สุด