วิธีจัดแนวเนื้อหาของ div ให้อยู่ด้านล่าง

1163

สมมติว่าฉันมีรหัส CSS และ HTML ดังต่อไปนี้:

#header {
  height: 150px;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

ขยายตัวอย่างข้อมูล

ส่วนหัวมีความสูงคงที่ แต่เนื้อหาส่วนหัวอาจเปลี่ยนไป

ฉันต้องการเนื้อหาของส่วนหัวที่จะจัดตำแหน่งในแนวตั้งที่ด้านล่างของส่วนหัวดังนั้นบรรทัดสุดท้ายของข้อความ "sticks" ที่ด้านล่างของส่วนหัว

ดังนั้นหากมีข้อความเพียงบรรทัดเดียวมันจะเป็นเช่น:

-----------------------------
| ชื่อส่วนหัว
|
|
|
| เนื้อหาส่วนหัว (ส่งผลให้หนึ่งบรรทัด)
-----------------------------

และถ้ามีสามบรรทัด:

-----------------------------
| ชื่อส่วนหัว
|
| เนื้อหาส่วนหัว (ซึ่งเป็นเช่นนั้น
| สิ่งที่สมบูรณ์แบบมาก
| ครอบคลุมมากกว่าสามบรรทัด)
-----------------------------

สิ่งนี้สามารถทำได้ใน CSS?

html css vertical-alignment

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

1322

การวางตำแหน่งสัมพันธ์ + สัมบูรณ์เป็นทางออกที่ดีที่สุดของคุณ:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

ขยายตัวอย่างข้อมูล

แต่คุณอาจพบปัญหาเกี่ยวกับเรื่องนี้ เมื่อฉันลองมันฉันมีปัญหากับเมนูแบบเลื่อนลงที่ปรากฏด้านล่างเนื้อหา มันไม่สวยเลย

สุจริตสำหรับปัญหาการจัดกึ่งกลางแนวตั้งและประเด็นการจัดตำแหน่งแนวตั้งใด ๆ กับรายการนั้นไม่ได้มีความสูงคงที่เพียงแค่ใช้ตาราง

ตัวอย่าง: คุณสามารถทำรูปแบบ HTML นี้โดยไม่ใช้ตารางได้หรือไม่

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

4

ฉันพบวิธีแก้ปัญหานั้นก่อนถามที่นี่ แต่อย่างใดลืมที่จะเพิ่มตำแหน่ง: ญาติ; ไปที่ div ส่วนหัวและเนื้อหายังคงเชื่อมโยงไปถึงที่ด้านล่างของหน้า ขอบคุณ

— kristof

15

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

— Alejandro García Iglesias

1

ในกรณีของเนื้อหาข้อความตามที่อธิบายไว้ในปัญหาดั้งเดิม # header-content ควรเป็นpองค์ประกอบจริง ๆหรืออย่างน้อย aspan

— Josh Burgess

2

อย่าใช้ตารางสำหรับข้อมูลที่ไม่ใช่ตาราง! แต่ให้ใช้คุณสมบัติการแสดงผลแบบ CSS display: table-cellหรือหรือtable-row tableคุณไม่จำเป็นต้องใช้ตารางอีกสำหรับเค้าโครงที่บริสุทธิ์

— Jeremy Moritz

1

ตำแหน่งส่วนหัวสัมพันธ์กับอะไร

— stack1

158

ใช้การวางตำแหน่ง CSS:

/* Creates a new stacking context on the header */
#header {
  position: relative;
}

/* Positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

ตามที่ระบุไว้ในcletusคุณต้องระบุเนื้อหาส่วนหัวเพื่อใช้งานนี้

<span id="header-content">some header content</span>

<div style="height:100%; position:relative;">
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>

— Patrick McElhaney
แหล่งที่มา

4

fyi ... นี่ทำให้เนื้อหาส่วนหัวของฉันยุบความกว้างดังนั้นฉันจึงต้องเพิ่ม a width = '100%'บนเนื้อหาส่วนหัว

— dsdsdsdsd

2

@dsdsdsdsd คุณสามารถแก้ไขได้โดยเพิ่ม display: block ไปที่ # header-content

— Patrick McElhaney

1

@dsdsdsdsd เหตุผลเป็นเพราะ<span>องค์ประกอบมีdisplay: inline;ตามค่าเริ่มต้นซึ่งไม่ใช้ความกว้างเต็มของภาชนะ การแก้ไขที่เหมาะสมที่สุดคือการเปลี่ยนการขยายเป็น a <div>ซึ่งเป็นองค์ประกอบบล็อกโดยค่าเริ่มต้น

— BadHorsie

1

หรือหนึ่งใน <h1> - <h6> ซึ่งถูกบล็อกโดยค่าเริ่มต้นและระบุข้อความเป็นส่วนหัวซึ่งมีประโยชน์สำหรับเครื่องมือค้นหาเทคโนโลยีการช่วยเหลือและผู้ที่อ่านรหัส

— Patrick McElhaney

ไม่ทำงานเมื่อเนื้อหาที่ด้านล่างมีความสูงของตัวแปรทำให้มันขยายออกจากขอบเขตของคอนเทนเนอร์

— Mozfet

126

หากคุณไม่กังวลเกี่ยวกับเบราว์เซอร์รุ่นเก่าให้ใช้ flexbox

องค์ประกอบหลักต้องการชุดการแสดงผลที่ยืดหยุ่น

div.parent {
  display: flex;
  height: 100%;
}

จากนั้นคุณตั้งค่าการจัดแนวตัวเองขององค์ประกอบลูกให้เป็นแบบยืดหยุ่น

span.child {
  display: inline-block;
  align-self: flex-end;
}

นี่คือทรัพยากรที่ฉันใช้ในการเรียนรู้: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

— ลีเออร์ไวน์
แหล่งที่มา

@bromromca เหตุผลสองข้อที่ใช้งานไม่ได้ 1: ใช้ 'จัดตำแหน่งตัวเอง' แทนจัดเรียงรายการ (ความผิดของฉันฉันได้แก้ไขโพสต์ดั้งเดิมของฉัน) 2: ความสูง 100% จะไม่ทำงานเว้นแต่ผู้ปกครองมีความสูง

— ลีเออร์ไวน์

ไม่ได้ผลสำหรับฉันฉันต้องการที่ด้านล่างของคอนเทนเนอร์ไม่ใช่จุดสิ้นสุดของรายการในคอนเทนเนอร์

— Mozfet

ในปี 2020 นี้ควรเป็นคำตอบที่ถูกต้อง: caniuse.com/#feat=flexbox

— tonygatta

119

ฉันใช้คุณสมบัติเหล่านี้และใช้งานได้!

#header {
  display: table-cell;
  vertical-align: bottom;
}

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

42

ไม่รองรับใน IE8 และรุ่นก่อนหน้า รองรับใน IE9

— random_user_name

23

@cale_b ตามที่caniuse.comใช้งานได้ใน IE8

— Zach Lysobey

5

@ZachL Happenstance - ฉันสนับสนุนแอปรุ่นเก่าใน IE8 สำหรับลูกค้าองค์กรและนี่ใช้งานได้จริง

— Daniel Szabo

4

@fguillen: ทดสอบใน Chrome (v31) แล้วเช่นกัน ทำงานที่นั่นด้วย

— Daniel Szabo

5

table-cellแบ่งสิ่งต่าง ๆ มากมาย เช่นเดียวกับระบบกริด Bootstrap col-md-12จะไม่ให้ div กว้าง 100% คุณอีกต่อไป

— โนอาห์

65

หลังจากที่ต้องดิ้นรนกับปัญหาเดียวกันนี้มาระยะหนึ่งแล้วในที่สุดฉันก็พบทางออกที่ตรงกับความต้องการทั้งหมดของฉัน:

ไม่ต้องการให้ฉันรู้ว่าความสูงของภาชนะ
ซึ่งแตกต่างจากการแก้ปัญหาแบบสัมพัทธ์ + แน่นอนเนื้อหาไม่ลอยในเลเยอร์ของตัวเอง
ใช้งานได้กับเบราว์เซอร์ (IE8 +)
ใช้งานง่าย

วิธีการแก้ปัญหาใช้เวลาเพียงหนึ่ง<div>ซึ่งฉันเรียกว่า "aligner":

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

HTML

<div class="bottom_aligner"></div>
... Your content here ...

เคล็ดลับนี้ใช้งานได้โดยสร้าง div ที่ผอมและสูงซึ่งดันข้อความพื้นฐานไปที่ด้านล่างของคอนเทนเนอร์

นี่คือตัวอย่างที่สมบูรณ์ที่บรรลุสิ่งที่ OP ต้องการ ฉันได้ทำ "bottom_aligner" หนาและสีแดงเพื่อการสาธิตเท่านั้น

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

จัดเนื้อหาด้านล่าง

— Greg Prisament
แหล่งที่มา

เกือบจะสมบูรณ์แบบ :) แต่มันไม่อนุญาตให้มีการขึ้นบรรทัดใหม่อัตโนมัติ

— Gaston Sanchez

ไม่ทำงานหากคอนเทนเนอร์ด้านนอกสามารถเลื่อนได้ (overflow-y: auto) :(

— ecraig12345

ฉันเดาว่าmarin: 8pxควรเป็นmargin: 8px

— Graham Perrin

2

สิ่งนี้ยังใช้งานได้หากวาง::beforeกฎซึ่งจะขจัดความต้องการองค์ประกอบเพิ่มเติม เราใช้ดิ้นในตอนท้าย แต่สิ่งนี้มีประโยชน์เมื่อคุณทำไม่ได้

— Sheepy

นี่เป็นทางออกที่ดีจริงๆ มันทำงานเฉพาะในกรณีที่heightกล่อง / ภาชนะบรรจุและผู้ปกครองของมันถูกตั้งค่า (เพื่อ px หรือ% หรืออะไรก็ตาม)

— BairDev

38

วิธีที่ทันสมัยที่จะทำมันจะใช้flexbox ดูตัวอย่างด้านล่าง คุณไม่จำเป็นต้องห่อSome text...ลงในแท็ก HTML ใด ๆ เนื่องจากข้อความที่อยู่ในคอนเทนเนอร์ flex โดยตรงจะถูกห่อในรายการ flex แบบไม่ระบุชื่อ

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

ขยายตัวอย่างข้อมูล

หากมีข้อความเพียงบางส่วนและคุณต้องการจัดตำแหน่งในแนวตั้งไปยังด้านล่างของภาชนะ

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}

<section>Some text aligns to the bottom</section>

ขยายตัวอย่างข้อมูล

— สติกเกอร์
แหล่งที่มา

2

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

— Swen

1

ภายในส่วนประกอบที่ทำปฏิกิริยานี่คือทางออกที่ถูกต้อง โซลูชันที่ยอมรับล้มเหลว

— Soleil - Mathieu Prévot

1

นี่เป็นทางออกเดียวที่ใช้งานได้จริงสำหรับฉัน อาจจะเกี่ยวข้องกับ React อย่างที่ @Soleil ได้พูดถึง ... ฉันไม่ใช่ผู้เชี่ยวชาญ CSS ดังนั้นฉันจึงไม่แน่ใจ

— BK

ทำงานได้อย่างสมบูรณ์แบบในส่วนประกอบการตอบสนอง

— user1155773

25

องค์ประกอบแบบอินไลน์หรือแบบอินไลน์บล็อกสามารถจัดเรียงให้อยู่ด้านล่างขององค์ประกอบระดับบล็อกได้หากความสูงบรรทัดขององค์ประกอบหลัก / บล็อกมากกว่าองค์ประกอบแบบอินไลน์ *

มาร์กอัป:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

CSS:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* ตรวจสอบให้แน่ใจว่าคุณอยู่ในโหมดมาตรฐาน

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

25

display: flex;
align-items: flex-end;

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

2

โปรดทราบว่า flexbox ไม่รองรับเบราว์เซอร์รุ่นเก่า

— AnthonyB

11

@AnthonyB - กำหนดเก่าหรือไม่ เราต้องเปลี่ยนเรคคอร์ดนี้ในฐานะนักพัฒนา เทคโนโลยีก้าวไปข้างหน้าและสิ่งเก่า ๆ ก็ไม่รอด IE9 และ 10 มีปัญหากับเฟล็กจากสิ่งที่ฉันเห็น แต่พวกเขาได้รับการปล่อยตัวในปี 2011 และ 2012 ตามลำดับ ... มันเป็น 2017 เราต้องปล่อยเบราว์เซอร์ที่ล้าสมัยและเสียเหล่านี้ ถ้าไม่ใช่เพื่อความพึงพอใจของภาพ แต่เพื่อความปลอดภัยและการอัพเดทซอฟต์แวร์ทั่วไป

— Tisch

3

@Tisch คุณพูดถูกเราจำเป็นต้องเป็นนักพัฒนาใช้เทคโนโลยีที่เหมาะสมและไม่นานมานี้ แต่ฉันเพียงแค่เตือนเกี่ยวกับปัญหาความเข้ากันได้นี้เพื่อไม่ให้ประหลาดใจ

— AnthonyB

หากเนื้อหาภายใต้<h1>อยู่ภายใน<p>หรือผมจะใช้<div> justify-content: space-between

— agapitocandemor

11

คุณสามารถงอได้อย่างง่ายดาย

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

ขยายตัวอย่างข้อมูล

— MK วิมาลา
แหล่งที่มา

6

หากคุณมีรายการความสูงแบบไดนามิกหลายรายการให้ใช้ค่าการแสดง CSS ของตารางและเซลล์ตาราง:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

ฉันได้สร้างการสาธิต JSBin ที่นี่: http://jsbin.com/INOnAkuF/2/edit

ตัวอย่างนี้ยังมีตัวอย่างวิธีจัดกึ่งกลางแนวตั้งโดยใช้เทคนิคเดียวกัน

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

5

นี่คือโซลูชันอื่นที่ใช้ flexbox แต่ไม่มีการใช้flex-endสำหรับการจัดตำแหน่งด้านล่าง ความคิดคือการตั้งค่าmargin-bottomในh1เพื่ออัตโนมัติที่จะผลักดันเนื้อหาที่เหลือไปที่ด้านล่าง:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>

ขยายตัวอย่างข้อมูล

เราสามารถทำเช่นเดียวกันกับmargin-top:autoในข้อความได้ แต่ในกรณีนี้เราต้องล้อมด้วย a divหรือspan:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>

ขยายตัวอย่างข้อมูล

— Temani Afif
แหล่งที่มา

Perfecto! gracias

— Grace Nikole

4

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

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

bottom: -webkit-calc(-100% + x);

ข้อมูลของคุณจะอยู่ที่ด้านล่างของคอนเทนเนอร์เสมอ ทำงานได้แม้ว่าคุณจะมีตู้คอนเทนเนอร์ที่มีความสูงแบบไดนามิก

HTML จะเป็นเช่นนี้

<div class="container">
  <div class="data"></div>
</div>

CSS จะเป็นเช่นนี้

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

ตัวอย่างสดที่นี่

หวังว่านี่จะช่วยได้

— Aditya Ponkshe
แหล่งที่มา

คุณช่วยอธิบายสิ่งที่bottom: -webkit-calc(-100% + x);กำลังทำอยู่ได้ไหม?

— mhatch

@ จับคู่มันช่วยให้ท้ายกระดาษที่ด้านล่างของภาชนะ

— Aditya Ponkshe

4

นี่คือวิธีที่ยืดหยุ่นในการทำ แน่นอนว่า IE8 ไม่รองรับเนื่องจากผู้ใช้ต้องการ 7 ปีที่แล้ว ขึ้นอยู่กับสิ่งที่คุณต้องการสนับสนุนบางสิ่งเหล่านี้สามารถทำได้ด้วย

ถึงกระนั้นก็คงจะดีถ้ามีวิธีการทำเช่นนี้โดยไม่ต้องใช้คอนเทนเนอร์ด้านนอกเพียงแค่ให้ข้อความจัดเรียงตัวเองภายในของตัวเอง

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

— absynthe เว็บสมิ ธ ใจ
แหล่งที่มา

4

วิธีแก้ปัญหาแบบบรรทัดเดียวที่ง่ายมากคือการเพิ่มบรรทัดความสูงให้กับ div โดยคำนึงว่าข้อความทั้งหมดของ div จะลงไปด้านล่าง

CSS:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

โปรดทราบว่านี่เป็นวิธีแก้ปัญหาที่ใช้งานได้จริงและรวดเร็วเมื่อคุณต้องการให้ข้อความใน div เลื่อนลงหากคุณต้องการรวมภาพและเนื้อหาเข้าด้วยกันคุณจะต้องใช้รหัสที่ซับซ้อนและตอบสนองต่อ CSS เล็กน้อย

— Pablo Contreras
แหล่งที่มา

3

หากคุณสามารถตั้งค่าความสูงของ div การตัดเนื้อหา (# header-content ดังแสดงในคำตอบของผู้อื่น) แทน #header ทั้งหมดบางทีคุณสามารถลองใช้วิธีนี้:

HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

แสดงบน codepen

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

3

ดูเหมือนว่าจะทำงาน:

HTML: ฉันอยู่ที่ด้านล่าง

CSS:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

— Admin File3
แหล่งที่มา

3

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

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

สิ่งนี้จะตอบสนองตามที่คาดไว้เมื่อเนื้อหาด้านล่างไม่ได้ถูกกำหนดขนาดและเมื่อคอนเทนเนอร์ไม่ได้กำหนดขนาดไว้

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

3

ฉันได้คิดวิธีที่ง่ายกว่าที่ระบุไว้มาก

ตั้งค่าความสูงของ div ส่วนหัว จากนั้นภายในนั้นให้จัดสไตล์H1แท็กของคุณดังนี้:

float: left;
padding: 90px 10px 11px

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

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

1

จะทำให้เนื้อหาลอยเหนือเนื้อหาอื่น ๆ เมื่อปรับขนาดหน้าจอโดยใช้เลย์เอาต์ตอบสนอง

— Mozfet

2

ฉันพบวิธีแก้ปัญหานี้ในเท็มเพลตเริ่มต้นเริ่มต้นระบบ

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

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

2

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

ขยายตัวอย่างข้อมูล

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

1

สิ่งนี้ทำให้การปรับขนาดของ div บนสุด ซึ่งใช้งานได้กับเค้าโครงข้อความพื้นฐาน แต่ไม่ทำงานเมื่อสิ่งต่าง ๆ มีพื้นหลังและสีและขนาดที่น่านับถือ

— Mozfet

0

ลองด้วย:

div.myclass { margin-top: 100%; }

ลองเปลี่ยน% เพื่อแก้ไข ตัวอย่าง: 120% หรือ 90% ... ฯลฯ

— เฟลิกซ์
แหล่งที่มา

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

— Mike Graf

0

เว็บไซต์ที่ฉันเพิ่งทำเพื่อลูกค้าขอให้ข้อความส่วนท้ายเป็นกล่องสูงโดยข้อความที่อยู่ด้านล่างฉันได้รับสิ่งนี้ด้วยการใส่อย่างง่ายควรทำงานกับเบราว์เซอร์ทั้งหมด

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

— Nicki L. Hansen
แหล่งที่มา

1

การประกาศครั้งแรกของคุณpadding: 0 30pxซ้ำซ้อนเล็กน้อยคุณอาจใส่padding: 30pxการประกาศอีก 2 รายการ

— แอนดรู

เป็นความจริงอย่างแน่นอน แต่ฉันกำลังปฏิบัติตามสถานที่ทำงานของฉัน

— Nicki L. Hansen

6

จริงๆ ?, ที่ดูเหมือนธรรมดาที่ไม่ดีปฏิบัติ เพียงใช้ชวเลขหรือชัดเจนทุกที่ padding: 60px 30px 8px;, padding: 60px 30px 8px 30px;สี่อย่างชัดเจนpadding-กฎหรือแม้กระทั่ง @ ข้อเสนอแนะ TheWaxMann ของทุกคนที่เหนือกว่า - และฉันเต็มใจและสามารถที่จะยืนยันว่าหนึ่ง ;-)

— ซัค Lysobey

-3

ตัวอย่างข้ามเบราว์เซอร์ที่สมบูรณ์แบบน่าจะเป็นสิ่งนี้ที่นี่:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

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

ต่อไปนี้เป็นตัวอย่างขั้นต่ำที่ทำงานได้อย่างสมบูรณ์ โปรดทราบว่าไม่จำเป็นต้องใช้กลอุบายการฝัง Div BRs หลายอันนั้นเพียงแค่บังคับให้แถบเลื่อนปรากฏขึ้น:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

หากคุณสงสัยว่ารหัสของคุณอาจไม่ทำงานบน IE อย่าลืมเพิ่มแท็ก DOCTYPE ที่ด้านบน มันสำคัญอย่างยิ่งที่จะต้องทำงานกับ IE นอกจากนี้ควรเป็นแท็กแรกและไม่ควรมีอะไรปรากฏอยู่ด้านบน

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

28

เนื่องจากคุณกำลังประกาศเอกสารของคุณว่าเข้มงวดกับ XHTML คุณควรปิด<br />แท็กด้วยตนเอง...

— Amos M. Carpenter

7

@ KarlKildénหากคุณอ้างถึงความคิดเห็นจาก aaamos มันแน่นอนที่สุดไม่ใช่ความคิดเห็นที่โง่ - การให้บริการเอกสารด้านบนพร้อมส่วนหัวที่ถูกต้องcontent-typeจะส่งผลให้เบราว์เซอร์มีข้อผิดพลาดในการแยกวิเคราะห์ xml

— มีดโกน

7

นี่คือการปฏิบัติที่ไม่ดี! ใช้ CSS แทน!

— m93a

-4

ดูเหมือนว่าจะทำงาน:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

การใช้น้อยลงทำให้การไขปริศนาด้วย CSS ยิ่งเหมือนการเขียนรหัสมากกว่า ... ฉันรัก CSS เป็นความยินดีอย่างยิ่งเมื่อคุณสามารถเปลี่ยนเค้าโครงทั้งหมด (โดยไม่ทำลาย :) เพียงแค่เปลี่ยนพารามิเตอร์เดียว

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

-7

โซลูชั่น 2015

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

ยินดีต้อนรับ

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

3

เค้าโครงตารางสำหรับสิ่งนี้อาจเป็นปัญหาได้ แนะนำให้ใช้ CSS แทน คุณสมบัติ valign ยังไม่ได้รับการสนับสนุนใน HTML5 (ดูw3schools.com/tags/att_td_valign.asp )

— undeniablyrob