Naprawiono nagłówek, stopkę z przewijaną treścią


86

Jak mogę uzyskać stały nagłówek, stopkę z przewijalną zawartością? Coś jak ta strona . Mogę spojrzeć na źródło, aby uzyskać CSS, ale chcę tylko znać minimum CSS i HTML, których potrzebuję, aby to działało.

wprowadź opis obrazu tutaj


1
to samo pytanie z tymi kwalifikatorami:
angular

to samo pytanie, ale z paskiem bocznym ORAZ stopka nie pojawia się, dopóki nie przewiniesz łańcuchem w dół ORAZ nie skończysz z dwoma paskami przewijania po prawej stronie
Simon_Weaver

Odpowiedzi:


132

Coś takiego

<html>
  <body style="height:100%; width:100%">
    <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div>
  </body>
</html> 

Nie ma to związku z negatywnymi opiniami, ale dotarłem tutaj i to nie zadziałało dla mnie (i dosłownie skopiowałem styl). Prawdopodobnie jQuery Mobile kręci się wokół. Ale nawet jeśli zadziałało, nie lubię oszukiwać stałych wymiarów. Wydaje mi się, że HTML / css jest o krok w tyle w stosunku do natywnych komponentów UI. Na każdej natywnej platformie, z którą pracowałem, tworzenie przewijanych kontenerów było bułką z masłem.
Mister Smith

@MisterSmith Przepraszam, że wyraźnie zapomniałem dodać styl, aby zablokować prawą stronę kontenerów. Ponadto ten kod będzie renderowany tylko do rozmiaru jego kontenera. Jeśli znajduje się pod tagiem body i chcesz mieć pełny ekran, musisz ustawić wysokość i szerokość na 100%. Wreszcie, jeśli chodzi o style zakodowane na stałe, to jest to tylko przykład, a nie do wydania produkcyjnego, nie ma mowy, bym kiedykolwiek wydał takie style wbudowane, ale wydawało się, że jest to bardziej odpowiedni sposób na wyjaśnienie odpowiedzi.
John Hartsock,

@JohnHartsock Zdecydowanie to JQM robił złe rzeczy. Jeśli chodzi o wymiary zakodowane na stałe, nie podoba mi się ustawianie wysokości bezwzględnej w pikselach. Na innych platformach, z którymi pracowałem, można było utworzyć kontener i powiedzieć mu, aby używał całej potrzebnej wysokości.
Mister Smith

@Mister Smith. Nie musisz na stałe kodować wymiarów w pikselach. Jeśli chcesz, możesz użyć procentów, ponadto nie musisz ustawiać stylu za pomocą atrybutu style w tagu, ale zamiast tego po prostu skonfiguruj arkusz stylów css odwołujący się do identyfikatorów. Po prostu zrobiłem to w ten sposób, aby było bardzo łatwe do zrozumienia.
John Hartsock

2
@JohnHartsock przegłosowuje prawdopodobnie dlatego, że jest to wbudowany css i nie wyjaśnia, dlaczego jest to tylko kopia i wklej odpowiedź
treyBake

63

Jeśli kierujesz reklamy na przeglądarki obsługujące elastyczne pola, możesz wykonać następujące czynności .. http://jsfiddle.net/meyertee/AH3pE/

HTML

<div class="container">
    <header><h1>Header</h1></header>
    <div class="body">Body</div>
    <footer><h3>Footer</h3></footer>
</div>

CSS

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

header {
    flex-shrink: 0;
}
.body{
    flex-grow: 1;
    overflow: auto;
    min-height: 2em;
}
footer{
    flex-shrink: 0;
}

Aktualizacja:
zobacz „Czy mogę używać”, aby uzyskać informacje o obsłudze skrzynek elastycznych w przeglądarce .


Używam nagłówka i stopki o zmiennej wysokości i wierzę, że to załatwi sprawę. Na szczęście celuję w najnowsze przeglądarki. Dziękuję Ci!
Jimmie Tyrrell

Świetny! Czy jest sposób, aby postawić w okolicy kolejną taką konstrukcję .body? Kiedy to robię, zewnętrzna strona .containerznika z widoku, gdy tylko wewnętrzna .body .bodyjest przewijana do końca.
philk

1
Moim zdaniem to najlepsza odpowiedź i to powinna być najlepsza odpowiedź! Dziękuję Ci!
Połącz

Jeśli się nie mylę, to jest odpowiedź na inne pytanie? Tutaj pasek przewijania pojawia się na całej stronie, podczas gdy w odpowiedzi Johna pasek przewijania pojawia się tylko przy głównej treści (o co chodzi w pytaniu)? Tak przynajmniej widzę na skrzypcach.
bersling

51

Podejście 1 - flexbox

Świetnie sprawdza się zarówno w przypadku znanych, jak i nieznanych elementów wysokości. Upewnij się, że ustawiłeś zewnętrzny element div na height: 100%;i zresetuj domyślne ustawienie marginna body. Zobacz tabele obsługi przeglądarek .

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.content {
  flex: 1;
  overflow: auto;
  background: pink;
}
<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Podejście 2 - tabela CSS

Zarówno dla znanych, jak i nieznanych elementów wysokości. Działa również w starszych przeglądarkach, w tym IE8.

jsFiddle

Podejście 3 - calc()

Jeśli nagłówek i stopka mają stałą wysokość, możesz użyć CSS calc().

jsFiddle

Podejście 4% dla wszystkich

Jeśli wysokość nagłówka i stopki jest znana i są one również procentowe, możesz po prostu wykonać prostą matematykę, tworząc razem 100% wysokości.

jsFiddle


7

Teraz mamy siatkę CSS. Witamy w 2019 roku.

/* Required */
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   height: 100vh;
   display: grid;
   grid-template-rows: 30px 1fr 30px;
}

#content {
   overflow-y: scroll;
}

/* Optional */
#wrapper > * {
   padding: 5px;
}

#header {
   background-color: #ff0000ff;
}

#content {
   background-color: #00ff00ff;
}

#footer {
   background-color: #0000ffff;
}
<body>
   <div id="wrapper">
      <div id="header">Header Content</div>
      <div id="content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div id="footer">Footer Content</div>
   </div>
</body>


1
Nie potrzebujesz wzrostu ciała. Wystarczy ustawić wysokość owijarki na 100vh, a będzie działać zarówno tutaj, jak i na wolności.
Henrique Erzinger

5

Od 2013 roku: takie byłoby moje podejście. jsFiddle:


HTML

<header class="container global-header">
    <h1>Header (fixed)</h1>
</header>

<div class="container main-content">
    <div class="inner-w">
        <h1>Main Content</h1>
    </div><!-- .inner-w -->
</div> <!-- .main-content -->

<footer class="container global-footer">
    <h3>Footer (fixed)</h3>
</footer>


SCSS

// User reset

* { // creates a natural box model layout
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} // asume normalize.css


// structure

.container {
    position: relative;
    width: 100%;
    float: left;
    padding: 1em;
}


// type

body {
    font-family: arial;   
}

.main-content {
    h1 {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: .2em;
    }
} // .main-content


// style

    // variables
    $global-header-height: 8em;
    $global-footer-height: 6em;

.global-header {
    position: fixed;
    top: 0; left: 0;
    background-color: gray;
    height: $global-header-height;
}

.main-content {
    background-color: orange;
    margin-top: $global-header-height;
    margin-bottom: $global-footer-height;
    z-index: -1; // so header will be on top
    min-height: 50em; // to make it long so you can see the scrolling
}

.global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: $global-footer-height;
    background-color: gray;
}

Prawdopodobnie użyłbym flex-box od 2016 roku. Jednak zawsze zależy to od kontekstu. Podstępne sytuacje! :)
sheriffderek

5

Oto, co zadziałało dla mnie. Musiałem dodać dół marginesu, aby stopka nie pochłonęła mojej treści:

header {
  height: 20px;
  background-color: #1d0d0a;
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hide;
}

content {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  margin-top: 20px;
  overflow: auto;
  width: 80%;
}

footer {
  position: fixed;
  bottom: 0px;
  overflow: hide;
  width: 100%;
}

0

U mnie działa dobrze, używając siatki CSS. Najpierw napraw kontener, a następnie podaj overflow-y: auto;do środka zawartość, która ma być przewijana tj. Inna niż nagłówek i stopka.

.container{
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  display: grid;
  grid-template-rows: 5em auto 3em;
}

header{
   grid-row: 1;  
    background-color: rgb(148, 142, 142);
    justify-self: center;
    align-self: center;
    width: 100%;
}

.body{
  grid-row: 2;
  overflow-y: auto;
}

footer{
   grid-row: 3;
   
    background: rgb(110, 112, 112);
}
<div class="container">
    <header><h1>Header</h1></header>
    <div class="body">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <footer><h3>Footer</h3></footer>
</div>

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.