ฉันจะบังคับให้บล็อก DIV ขยายไปยังด้านล่างของหน้าได้อย่างไรแม้ว่าจะไม่มีเนื้อหา

190

ในมาร์กอัปที่แสดงด้านล่างฉันพยายามทำให้ div เนื้อหายืดออกไปจนถึงด้านล่างของหน้า แต่จะยืดออกก็ต่อเมื่อมีเนื้อหาที่จะแสดง เหตุผลที่ฉันต้องการทำเช่นนี้ก็คือเส้นขอบแนวตั้งยังคงปรากฏอยู่บนหน้าแม้ว่าจะไม่มีเนื้อหาใด ๆ ที่จะแสดง

นี่คือHTMLของฉัน:

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content">
    </div>

และCSSของฉัน:

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}

css html border

— มีดโกน
แหล่งที่มา

คุณต้องการให้มันทำอะไรถ้ามีเนื้อหามากกว่านั้นก็จะพอดีกับหน้า? เบราว์เซอร์ใดที่คุณสนใจ

— drs9222

116

ปัญหาของคุณไม่ใช่ว่า div ไม่ใช่ความสูง 100% แต่ที่บรรจุรอบ ๆ นั้นไม่ใช่สิ่งนี้จะช่วยในเบราว์เซอร์ที่ฉันสงสัยว่าคุณกำลังใช้:

html,body { height:100%; }

คุณอาจต้องปรับการขยายและระยะขอบเช่นกัน แต่วิธีนี้จะช่วยให้คุณได้ 90% ของวิธีการนั้นหากคุณต้องการทำให้มันทำงานกับเบราว์เซอร์ทั้งหมดคุณจะต้องยุ่งกับมันเล็กน้อย

ไซต์นี้มีตัวอย่างที่ยอดเยี่ยม:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

ฉันยังแนะนำให้ไปที่http://quirksmode.org/

— Jason Hernandez
แหล่งที่มา

47

โซลูชันนี้ไม่เป็นมิตรกับหน้าเว็บที่เลื่อน

— jbranchaud

3

คุณสมบัติความสูงขั้นต่ำใน CSS ควรช่วยเขาออกมา ... ฉันเดา

— Alfabravo

1

สิ่งที่น่าสนใจนี้ได้จัดเรียงปัญหาการเลื่อนของฉันซึ่งตรงข้ามกับการทำให้เกิดปัญหา

— Alan Macdonald

มันไม่ทำงานสำหรับฉันใน chrome รุ่นล่าสุด

— HelloWorldNoMore

49

ฉันจะพยายามตอบคำถามโดยตรงในชื่อมากกว่าจะงุนงงกับการวางส่วนท้ายของหน้า

ทำให้ div ขยายไปถึงด้านล่างของหน้าหากเนื้อหาไม่เพียงพอที่จะเติมวิวพอร์ตเบราว์เซอร์แนวตั้งที่มี:

สาธิตที่ (ลากที่จับเฟรมเพื่อดูเอฟเฟกต์): http://jsfiddle.net/NN7ky
(กลับหัว: สะอาดเรียบง่ายข้อเสีย: ต้องการ flexbox - http://caniuse.com/flexbox )

HTML:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - หรือฉันแค่ง่วงเกินไป

— Gima
แหล่งที่มา

14

พวกเราบางคนโชคดีพอที่จะรองรับเฉพาะเบราว์เซอร์ "ทันสมัย" เท่านั้นนี่เป็นประโยชน์อย่างมากสำหรับฉัน ขอบคุณ Gima ฉันลองทำหลายวิธีเช่นนี้ แต่มันก็หักในหลาย ๆ วิธี มันดีกว่ามาก ยังไม่เข้าใจว่าทำไมจึงทำงานเช่นนี้

— Chris Nicola

1

องค์ประกอบ Flexbox พยายามแบ่งพื้นที่เนื้อหาระหว่างองค์ประกอบในนั้น โซลูชันที่ฉันเสนอให้ทำงานโดย 1) ปฏิเสธการลดขนาดของ divs และ 2) เปิดใช้งานการเติบโตของ. div2 ดังนั้น div จะไม่ย่อขนาดเพื่อซ่อนเนื้อหาและอนุญาตให้ขยายได้เท่านั้น. 2

— Gima

ดังนั้นสิ่งนี้จะแก้ไขปัญหาที่ฉันมีใน Firefox ซึ่งเนื้อหายังใหญ่เกินไปสำหรับเบราว์เซอร์ น่าเสียดายที่ใน Chrome สิ่งนี้ไม่ได้ช่วยแก้ปัญหานั้น อย่างไรก็ตามการตั้งค่าระยะขอบและช่องว่างภายในเป็น 0 ทำเช่นกัน

— Michael Scheper

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

— zakius

หลังจากเวลาผ่านไปหลายชั่วโมงที่ต้องดิ้นรนกับปัญหานี้นี่เป็นทางออกเดียวที่แก้ไขได้จริงสำหรับฉัน หายไปเพียงคำอธิบายเล็กน้อยว่าแต่ละส่วนทำอะไร แต่อย่างไรก็ตามขอขอบคุณ @Gima

— pylund

18

ลองเล่นกับกฎ css ต่อไปนี้:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

เปลี่ยนความสูงเพื่อให้เหมาะกับหน้าของคุณ ความสูงถูกกล่าวถึงสองครั้งสำหรับความเข้ากันได้ของเบราว์เซอร์ข้าม

— เควินอ่าน
แหล่งที่มา

ใช้งานได้ แต่ฉันพบว่าถ้าฉันเพิ่มความสูงขั้นต่ำเป็นมากกว่า 600px มันจะสร้างการเลื่อน คุณมีความคิดว่าทำไมสิ่งนี้เกิดขึ้นหรือไม่

— Siddharth Patel

1

@SiddharthPatel เนื่องจาก div #content กำลังไหลล้นผู้ปกครอง ดังนั้นตั้งค่าพาเรนต์ของ #content div ให้มีค่าโอเวอร์โฟล: อัตโนมัติหรือโอเวอร์โฟลว์: ซ่อน css และควรขยาย / โอเวอร์โฟลว์ให้พอดีแทนที่จะเลื่อน อาจจะดีกว่าที่จะก่อให้เกิดคำถามเช่นคำถามใหม่ในครั้งต่อไปมากกว่าความเห็น :)

— หนุ่ม McCormack

หลังจากลองใช้วิธีการของแต่ละคำตอบแล้วนี่เป็นวิธีเดียวที่ใช้ได้ผล แม้มันจะทำงานได้อย่างสมบูรณ์เพราะฉันต้องปรับค่าความสูงเพื่อให้ตรงกับความสูงของหน้าดังนั้นมันจึงใช้เวลาปรับแต่ง อย่างไรก็ตามมันจะทำงานได้อย่างเท่าเทียมกันสำหรับเบราว์เซอร์ทั้งหมด

— TARKUS

ขอบคุณมากสำหรับคำตอบนี้ มันเป็นเพียงและทำงานได้ดีในหลายแพลตฟอร์ม ที่จริงฉันเคยใช้มันมาก่อนโดยไม่ทราบว่าประมาณ 1 ปีที่แล้วหวังว่าฉันจะสามารถโหวตได้สองครั้ง

— vedi0boy

6

คุณสามารถแฮ็คมันด้วยการประกาศความสูงขั้นต่ำ

<div style="min-height: 100%">stuff</div>

— โอเว่น
แหล่งที่มา

4

ลองใช้โซลูชัน "Sticky Footer" ของ Ryan Fait

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

ทำงานได้ทั้ง IE, Firefox, Chrome, Safari และ Opera ที่ควรจะเป็น แต่ไม่ได้ทำการทดสอบ มันเป็นทางออกที่ดี ง่ายมากและเชื่อถือได้ในการใช้งาน

— Anjisan
แหล่งที่มา

7

ลิงค์ลง! ลิงค์ลง!

— codemirror

3

นี่คือการตกสู่บาปของพวกเรา🍻

— อับราฮัมบรูกส์

1

ลิงค์

— c24w

3

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

เป็นการแฮ็กเล็กน้อย แต่คุณสามารถเพิ่ม div ว่างด้วยความกว้าง 1px และสูงเช่น 1000px ภายใน #content div ของคุณ ซึ่งจะบังคับให้เนื้อหามีความสูงอย่างน้อย 1,000px และยังอนุญาตให้เนื้อหาที่มีความยาวเพิ่มขึ้นเมื่อต้องการ

— ยีน
แหล่งที่มา

3

แม้ว่ามันจะไม่หรูหราเท่า CSS บริสุทธิ์จาวาสคริปต์เพียงเล็กน้อยก็สามารถช่วยให้บรรลุเป้าหมายนี้ได้:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>

— อดัมฟรังโก
แหล่งที่มา

3

ลอง:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

ยังไม่ได้ทดสอบ ...

— สเตฟานี
แหล่งที่มา

3

ส่วนท้ายของเหนียวที่มีความสูงคงที่:

รูปแบบ HTML:

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}

— David Horák
แหล่งที่มา

2

ลองhttp://mystrd.at/modern-clean-css-sticky-footer/

ลิงค์ด้านบนไม่ทำงาน แต่ลิงค์นี้https://stackoverflow.com/a/18066619/1944643ใช้ได้ : D

การสาธิต:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>

— Vinicius José Latorre
แหล่งที่มา

1

@codemirror ขอบคุณฉันเพิ่งแก้ไขความคิดเห็นด้วยลิงค์อื่นที่ใช้งานได้

— Vinicius José Latorre

1

คุณสามารถใช้หน่วยความยาว "vh" สำหรับคุณสมบัติความสูงขั้นต่ำขององค์ประกอบเองและผู้ปกครอง รองรับตั้งแต่ IE9:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}

— นิโก้
แหล่งที่มา

สิ่งนี้จะขยาย div ไปที่ความสูงของวิวพอร์ตไม่ใช่เฉพาะหน้าเว็บ

— jansmolders86

1

ฉันคิดว่าปัญหาจะได้รับการแก้ไขเพียงแค่ทำให้ html เติม 100% ด้วยเช่นกันอาจเป็นเนื้อหาที่เติม html ของ 100% แต่ html จะไม่เติมเต็ม 100% ของหน้าจอ

ลองด้วย:

html, body {
      height: 100%;
}

— David Marciel
แหล่งที่มา

0

คุณอาจจะชอบสิ่งนี้: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

มันไม่ได้เป็นสิ่งที่คุณขอ แต่มันก็อาจจะเหมาะกับความต้องการของคุณ

— แดน
แหล่งที่มา

0

ฉันไม่มีรหัส แต่ฉันรู้ว่าฉันทำได้เมื่อใช้ความสูง: 1,000px และระยะขอบ: -1000px; ลองดู

— Alexander Morland
แหล่งที่มา

ว้าวมันใช้งานได้จริง! แต่ถ้าเนื้อหาล้นคอนเทนเนอร์มันเป็นไปไม่ได้ที่จะเห็นส่วนที่ล้น ...

— adripanico

0

ขึ้นอยู่กับว่าเลย์เอาต์ของคุณทำงานอย่างไรคุณอาจหนีไปด้วยการตั้งค่าพื้นหลังของ<html>องค์ประกอบซึ่งอย่างน้อยก็ความสูงของวิวพอร์ต

0

ไม่สามารถทำสิ่งนี้ได้สำเร็จโดยใช้สไตล์ชีตเท่านั้น (CSS) เบราว์เซอร์บางตัวจะไม่ยอมรับ

height: 100%;

เป็นค่าที่สูงกว่ามุมมองของหน้าต่างเบราว์เซอร์

Javascript เป็นวิธีการแก้ปัญหาข้ามเบราว์เซอร์ที่ง่ายที่สุด แต่ตามที่กล่าวไว้ไม่ใช่วิธีที่สะอาดหรือสวยงาม

— นกนางแอ่น
แหล่งที่มา

-2

ฉันรู้ว่านี่ไม่ใช่วิธีที่ดีที่สุด แต่ฉันไม่สามารถหาได้โดยไม่ต้องยุ่งกับหัวข้อเมนูและตำแหน่งอื่น ๆ ดังนั้น .... ฉันใช้ตารางสำหรับสอง colums มันเป็นการแก้ไขด่วน ไม่จำเป็นต้องใช้ JS;)

— Wen-D
แหล่งที่มา

-2

ไม่ใช่สิ่งที่ดีที่สุดหรือการใช้มาตรฐานที่ดีที่สุด แต่คุณสามารถเปลี่ยน DIV สำหรับ SPAN ได้ ... มันเป็นการแนะนำที่ไม่แนะนำ แต่รวดเร็วแก้ไข = P =)

— Metafaniel
แหล่งที่มา