เค้าโครง CSS ความสูงขั้นต่ำ 100%

อะไรคือวิธีที่ดีที่สุดในการสร้างองค์ประกอบที่มีความสูงขั้นต่ำ 100% ในเบราว์เซอร์ที่หลากหลาย

โดยเฉพาะอย่างยิ่งถ้าคุณมีรูปแบบที่มีheaderและfooterคงที่height,

คุณจะทำให้ส่วนที่เป็นสื่อกลางเติมเต็ม100%พื้นที่ในระหว่างที่มีการfooterแก้ไขไปที่ด้านล่างได้อย่างไร

ฉันใช้สิ่งต่อไปนี้: เค้าโครง CSS - ความสูง 100%

Min-สูง

องค์ประกอบ #container ของหน้านี้มีความสูงขั้นต่ำ 100% ด้วยวิธีนี้หากเนื้อหาต้องการความสูงมากกว่าวิวพอร์ตที่มีให้ความสูงของ #content บังคับให้ #container ยาวขึ้นเช่นกัน คอลัมน์ที่เป็นไปได้ใน #content สามารถมองเห็นได้ด้วยภาพพื้นหลังบน #container divs ไม่ใช่เซลล์ตารางและคุณไม่ต้องการ (หรือต้องการ) องค์ประกอบทางกายภาพเพื่อสร้างเอฟเฟ็กต์ภาพ หากคุณยังไม่มั่นใจ คิดว่าเส้นที่สั่นคลอนและการไล่ระดับสีแทนเส้นตรงและโครงร่างสีที่เรียบง่าย

การวางตำแหน่งสัมพัทธ์

เนื่องจาก #container มีตำแหน่งสัมพัทธ์ #footer จะยังคงอยู่ที่ด้านล่างเสมอ เนื่องจากความสูงขั้นต่ำที่กล่าวถึงข้างต้นไม่ได้ป้องกัน #container จากการปรับสเกลสิ่งนี้จะใช้ได้แม้ว่า (หรือมากกว่าโดยเฉพาะเมื่อ) #content บังคับให้ #container กลายเป็นอีกต่อไป

padding ล่าง

เนื่องจากไม่มีอยู่ในโฟลว์ปกติอีกต่อไปแล้วการเติมด้านล่างของ #content จะให้พื้นที่สำหรับ #footer สัมบูรณ์ การขยายนี้รวมอยู่ในความสูงที่เลื่อนตามค่าเริ่มต้นดังนั้นส่วนท้ายจะไม่ซ้อนทับเนื้อหาข้างต้น

ปรับขนาดตัวอักษรเล็กน้อยหรือปรับขนาดหน้าต่างเบราว์เซอร์ของคุณเพื่อทดสอบโครงร่างนี้

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

ทำงานได้ดีสำหรับฉัน

หากต้องการตั้งค่าความสูงที่กำหนดเองล็อคไปที่อื่น:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

นี่คือวิธีการแก้ปัญหาอื่นขึ้นอยู่กับvhหรือviewpoint heightสำหรับรายละเอียดโปรดเยี่ยมชมหน่วย CSS มันขึ้นอยู่กับการแก้ปัญหานี้ซึ่งใช้ดิ้นแทน

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

หน่วยคือ vw, vh, vmax, vmin โดยทั่วไปแต่ละหน่วยมีค่าเท่ากับ 1% ของขนาดวิวพอร์ต ดังนั้นเมื่อวิวพอร์ตเปลี่ยนไปเบราว์เซอร์จะคำนวณค่านั้นและปรับตามนั้น

คุณสามารถหาข้อมูลเพิ่มเติมได้ที่นี่:

โดยเฉพาะ:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

คำตอบของ kleolb02 ดูดีทีเดียว อีกวิธีหนึ่งคือการรวมกันของส่วนท้ายเหนียวและแฮ็คความสูงขั้นต่ำ

สำหรับmin-heightการทำงานอย่างถูกต้องกับเปอร์เซ็นต์ในขณะที่สืบทอดโหนดหลักของมันmin-heightเคล็ดลับก็คือการตั้งค่าความสูงโหนดหลักเป็น1pxแล้วเด็กmin-heightจะทำงานได้อย่างถูกต้อง

หน้าตัวอย่าง

CSSวิธีการแก้ปัญหาบริสุทธิ์( #content { min-height: 100%; }) จะทำงานในหลายกรณี แต่ไม่ทั้งหมด - โดยเฉพาะ IE6 และ IE7

น่าเสียดายที่คุณจะต้องหันไปใช้โซลูชัน JavaScript เพื่อให้ได้พฤติกรรมตามที่ต้องการ สิ่งนี้สามารถทำได้โดยการคำนวณความสูงที่ต้องการสำหรับเนื้อหาของคุณ<div>และตั้งเป็นคุณสมบัติ CSS ในฟังก์ชั่น:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

จากนั้นคุณสามารถตั้งค่าฟังก์ชันนี้เป็นตัวจัดการonLoadและonResizeกิจกรรม:

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

ฉันเห็นด้วยกับ Levik เนื่องจากคอนเทนเนอร์หลักถูกตั้งค่าเป็น 100% ถ้าคุณมีไซด์บาร์และต้องการให้พวกเขาเติมเต็มช่องว่างเพื่อพบกับท้ายกระดาษคุณไม่สามารถตั้งค่าให้เป็น 100% ได้เพราะมันจะเป็น 100 เปอร์เซ็นต์ของความสูงหลักเช่นกัน หมายความว่าท้ายท้ายการกดลงเมื่อใช้ฟังก์ชั่นที่ชัดเจน

ให้คิดอย่างนี้ถ้าส่วนหัวของคุณพูดความสูง 50px และส่วนท้ายของคุณคือความสูง 50px และเนื้อหาจะถูกป้อนเข้าไปในพื้นที่ที่เหลือโดยอัตโนมัติเช่น 100px ตัวอย่างเช่นคอนเทนเนอร์หน้า 100% ของค่านี้ความสูงจะเป็น 200px จากนั้นเมื่อคุณตั้งค่าความสูงของแถบด้านข้างเป็น 100% จะเท่ากับ 200px แม้ว่ามันควรจะพอดีกับส่วนระหว่างหัวกระดาษและท้ายกระดาษ แต่กลับกลายเป็น 50px + 200px + 50px ดังนั้นหน้านี้จึงเป็น 300px เนื่องจากแถบด้านข้างถูกตั้งค่าให้มีความสูงเท่ากับคอนเทนเนอร์หน้า จะมีพื้นที่สีขาวขนาดใหญ่ในเนื้อหาของหน้า

ฉันใช้ Internet Explorer 9 และนี่คือสิ่งที่ฉันได้รับตามผลเมื่อใช้วิธีนี้ 100% ฉันไม่ได้ลองในเบราว์เซอร์อื่นและฉันคิดว่ามันอาจทำงานได้ในตัวเลือกอื่น ๆ แต่มันจะไม่เป็นสากล

ก่อนอื่นคุณควรสร้าง a divด้วยid='footer'หลังจากcontentdiv ของคุณแล้วทำสิ่งนี้

HTML ของคุณควรมีลักษณะดังนี้:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

และ CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

ลองสิ่งนี้:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

divองค์ประกอบดังต่อไปนี้ div clear:bothเนื้อหาต้องมี

อาจเป็นทางออกที่สั้นที่สุด (ใช้ได้เฉพาะในเบราว์เซอร์ที่ทันสมัย)

CSS ชิ้นเล็ก ๆ นี้ทำให้"the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

ข้อกำหนดเพียงอย่างเดียวคือคุณต้องมีส่วนท้ายที่มีความสูงคงที่

ตัวอย่างเช่นสำหรับรูปแบบนี้:

    <html><head></head><body>
      <main> your main content </main>
      </footer> your footer content </footer>
    </body></html>

คุณต้องการ CSS นี้:

    html, body { height: 100%; }
    main { min-height: calc(100% - 2em); }
    footer { height: 2em; }

คุณสามารถลอง: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ นั่นคือความสูง 100% และศูนย์กลางแนวนอน

เพียงแบ่งปันสิ่งที่ฉันใช้และทำงานได้ดี

#content{
        height: auto;
        min-height:350px;
}

ดังที่ได้กล่าวไว้ในคำตอบของ Afshin Mehrabani คุณควรกำหนดความสูงของร่างกายและ html เป็น 100% แต่เพื่อให้ได้ส่วนท้ายที่นั่นให้คำนวณความสูงของเสื้อคลุม:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}