Jak zmusić blok DIV do rozciągnięcia na dół strony, nawet jeśli nie zawiera treści?

190

W pokazanym poniżej znaczniku próbuję rozciągnąć div treści aż do dołu strony, ale rozciągnie się tylko wtedy, gdy będzie zawartość do wyświetlenia. Powodem, dla którego chcę to zrobić, jest to, że pionowa ramka nadal pojawia się na stronie, nawet jeśli nie ma żadnych treści do wyświetlenia.

Oto mój 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>

I mój 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 Brzytwa
źródło
Co chcesz zrobić, jeśli na stronie jest więcej treści niż mieści się na stronie? Jakie przeglądarki Cię interesują?
drs9222,

Odpowiedzi:

116

Twój problem nie polega na tym, że div nie ma 100% wysokości, ale że pojemnik wokół niego nie jest. Pomoże to w przeglądarce Podejrzewam, że używasz:

html,body { height:100%; }

Konieczne może być również dostosowanie marginesów i marginesów, ale dostaniesz 90% możliwości. Jeśli chcesz, aby działał ze wszystkimi przeglądarkami, będziesz musiał trochę z tym popsuć.

Ta strona ma kilka doskonałych przykładów:

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

Polecam także przejść na http://quirksmode.org/

Jason Hernandez
źródło
47
To rozwiązanie nie jest przyjazne dla przewijanych stron.
jbranchaud
3
własność min-height w CSS powinna mu pomóc ... Chyba
Alfabravo
1
Co ciekawe, rozwiązało to moje problemy z przewijaniem, a nie powodowało je
Alan Macdonald
To nie działa dla mnie w najnowszej wersji chrome.
HelloWorldNoMore
49

Postaram się odpowiedzieć na pytanie bezpośrednio w tytule, zamiast dążyć do przyklejenia stopki na dole strony.

Ustaw div na dolną część strony, jeśli nie ma wystarczającej ilości treści, aby wypełnić dostępne pionowe okno przeglądarki:

Demo na (przeciągnij uchwyt ramki, aby zobaczyć efekt): http://jsfiddle.net/NN7ky
(plus: czysty, prosty. Minus: wymaga 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 - lub jestem po prostu zbyt śpiący

Gima
źródło
14
Niektórzy z nas mają tyle szczęścia, że ​​obsługują tylko „nowoczesne” przeglądarki, więc było to dla mnie niezwykle przydatne. Dzięki Gima. Próbowałem zrobić kilka takich rzeczy, ale zawsze było to łamane na różne subtelne sposoby. To jest dużo lepsze. Nadal nie rozumiem dokładnie, dlaczego tak działa.
Chris Nicola,
1
Element Flexbox próbuje podzielić swój obszar zawartości na zawarte w nim elementy. Rozwiązanie, które zaproponowałem, polega na 1) zaprzeczeniu zmniejszeniu div i 2) umożliwieniu wzrostu .div2. Dlatego divy nie kurczą się, aby ukryć swoją zawartość, i tylko .div2 może się rozwijać.
Gima,
To rozwiązuje problem, który miałem w przeglądarce Firefox, gdzie zawartość była wciąż nieco za duża dla przeglądarki. Niestety w Chrome samo to nie rozwiązuje tego problemu. Jednak ustawienie marginesu i wypełnienia na 0 również.
Michael Scheper,
to poprawna odpowiedź, min-wysokość: 100% działa tylko wtedy, gdy w pojemniku nadrzędnym nie ma już nic, a kalkowanie nie jest tak naprawdę pomocne, jeśli rodzeństwo powyżej elementu rozszerzającego ma nieznaną wysokość
zakius
Po wielu godzinach zmagania się z tym problemem jest to jedyne rozwiązanie, które naprawiło to dla mnie. Brakuje tylko małego wyjaśnienia, co robi każda część. Ale i tak dziękuję bardzo @Gima.
pylund
18

Spróbuj pobawić się następującą zasadą css:

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

Zmień wysokość w celu dopasowania do strony. wysokość jest wymieniona dwukrotnie dla kompatybilności z różnymi przeglądarkami.

Kevin Read
źródło
to działa, ale odkryłem, że jeśli zwiększę minimalną wysokość do ponad 600 pikseli, utworzy się zwój. Czy masz jakiś pomysł, dlaczego tak się dzieje?
Siddharth Patel,
1
@SiddharthPatel Ponieważ #content div przepełnia swojego rodzica. Ustaw więc element nadrzędny div #content, aby miał przepełnienie: auto lub przepełnienie: ukryta wartość css i powinien on rozwinąć / przepełnić, aby pasował, zamiast przewijać. Prawdopodobnie lepiej byłoby postawić takie pytania jak nowe pytania następnym razem niż komentarze :)
Colt McCormack
Po wypróbowaniu metody każdej odpowiedzi jest to jedyna, która działa. Nawet to działa idealnie, ponieważ muszę dopasować wartość wysokości do wysokości strony, więc trzeba ją ulepszyć. Działa to jednakowo dla wszystkich przeglądarek.
TARKUS,
Dziękuję bardzo za tę odpowiedź. Jest to po prostu i działa dobrze na wielu platformach. Właściwie użyłem tego wcześniej, nie zdając sobie sprawy z tego około rok temu, chciałbym głosować dwa razy.
vedi0boy
6

możesz trochę zhakować to z deklaracją minimalnej wysokości

<div style="min-height: 100%">stuff</div>
piekarnik
źródło
3

Właściwość min-height nie jest obsługiwana przez wszystkie przeglądarki. Jeśli potrzebujesz #content, aby zwiększyć jego wysokość na dłuższych stronach, właściwość height skróci go.

To trochę hack, ale możesz dodać pusty div o szerokości 1px i wysokości np. 1000px w swoim div #content. To zmusi zawartość do co najmniej 1000 pikseli wysokości i nadal pozwoli na dłuższe treści, aby zwiększyć wysokość w razie potrzeby

Gen
źródło
3

Chociaż nie jest tak elegancki jak czysty CSS, mała część javascript może pomóc w osiągnięciu tego:

<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>
Adam Franco
źródło
3

Próbować:

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

Jeszcze go nie testowałem ...

Steph
źródło
3

Lepka stopka o stałej wysokości:

Schemat 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
źródło
2

Spróbuj http://mystrd.at/modern-clean-css-sticky-footer/

Powyższy link nie działa, ale ten link https://stackoverflow.com/a/18066619/1944643 jest w porządku. :RE

Próbny:

<!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
źródło
1
@codemirror dzięki, właśnie edytowałem komentarz z innym działającym linkiem.
Vinicius José Latorre
1

Możesz użyć jednostki długości „vh” dla właściwości min-height samego elementu i jego rodziców. Jest obsługiwany od 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;
}
Nico
źródło
To tylko rozciąga div do wysokości rzutni, a nie samą stronę.
jansmolders86
1

Wydaje mi się, że problem zostałby rozwiązany po prostu poprzez wypełnienie HTML w 100%, może to być wypełnienie treści w 100% HTML, ale HTML nie wypełnia 100% ekranu.

Spróbuj z: 

html, body {
      height: 100%;
}
David Marciel
źródło
0

Nie mam kodu, ale wiem, że zrobiłem to raz, używając kombinacji wysokości: 1000px i marginesu-dołu: -1000px; Spróbuj tego.

Alexander Morland
źródło
Wow, to naprawdę działa! Ale jeśli zawartość przepełnia pojemnik, nie można zobaczyć przepełnionej części ...
adripanico
0

W zależności od tego, jak działa Twój układ, możesz uniknąć ustawienia tła w <html> elementu, który zawsze ma wysokość co najmniej rzutni.


źródło
0

Nie jest to możliwe przy użyciu tylko arkuszy stylów (CSS). Niektóre przeglądarki nie akceptują

height: 100%;

jako wartość wyższa niż punkt widzenia okna przeglądarki.

JavaScript jest najłatwiejszym rozwiązaniem dla różnych przeglądarek, choć, jak wspomniano, nie jest ani czysty, ani piękny.

Jaskółka oknówka
źródło
-2

Wiem, że nie jest to najlepsza metoda, ale nie mogłem tego rozgryźć bez bałagania pozycji w nagłówku, menu itp. Więc .... Użyłem stołu dla tych dwóch kolumn. To była SZYBKA naprawa. Nie wymaga JS;)

Wen-D
źródło
-2

Nie jest to ani najlepsza, ani najlepsza implementacja najwyższych standardów, ale możesz zmienić DIV dla SPAN ... To nie jest tak godne polecenia, ale szybka poprawka = P =)

Metafaniel
źródło