boostrap wyświetlanie diva na całe wysokości

0

Chciałbym aby div class=main wyświetlam mi się całej długości przeglądarki [(https://jsfiddle.net/DTcHh/)]

0
.main {
    width: 100%;
}
0

Pomyliłem się o wysokość mi chodziło. Mam ustawione height 100% ale nie działa

0

height dotyczy wysokości względem kontenera. Powinieneś w takim razie dorzucić to również do wszystkich przodków. No i nie ma to za wiele wspólnego z bootstrapem, polecam przeglądnięcie MDNa.

html, body, .container, .jumbotron {
  height: 100%;
}
0

Dodam jeszcze że powyższe rzecz jasna powinno być dopasowane do całości, czyli raczej po idkach niż po klasach albo przynajmniej z określeniem hierarchii (żeby jakieś inne jumbotrony ci się nie rozjechały).

0

Dzięki już to ogarnąłem jak mnie więcej działa. Tylko pojawił się kolejny problem. W chrome przy testowani na różne mobilne urządzenia w dole ekranu (chyba to jest body ?) jest większa niż pozostałe div i wystaje. Szerokością też tak się robi zależy od rozdzielczości.

0

ciężko wróżyć z fusów, ale poczytaj o media queries i spróbuj dostosować

0

Mam ustawione height: 100% w poszczególnych divach i działa to dobrze ale pojawił się inny problem. Jak wysokość całej strony nie mieści się w oknie przeglądarki (trzeba użyć scroling) to rodzice są tylko widoczne do tego dolnego punkt po przesunięciu w dół już się nie rozciągają czyli mainSite i main( - to są w sumie takie kontenery z tłem.)

<body>
<div class="container-fluid">
<div class="row">
         <div class="col-md-10 col-md-offset-2  col-sm-9 col-sm-offset-3 mainSite">
           <div class="frameTop"> </div>
           <div class="main">
             <div id="myCarousel" class="carousel slide " data-ride="carousel"> </div>
              <div class="col-xs-12 text"></div>
               <h1 class="center"></h1>
               <div class="col-xs-12 center"></div>
          </div>
</div>
</div>
</body>

html,body,.container-fluid,.row, . mainSite,   {
   height :100%;

}
.frameTop{

height:5%;
}
.main{
height:95%;
}

Reszta elementów height ma auto
0

Po pierwsze usuń przecinek po klasie mainSite.

Po drugie dodaj do body margin: 0; i padding: 0;

Po trzecie dodaj float: left; i width: 100%; do klas frameTop i main.

Cały kod:

body {
  padding: 0;
  margin: 0;
}
html,
body,
.container-fluid,
.row,
.mainSite {
  height :100%;
}
.frameTop,
.main {
  float: left;
  width: 100%;
}
.frameTop {
  height:5%;
}
.main {
  height:95%;
}

lub otocz frameTop i main divem z klasą row. Do frameTop i main dodaj klasę col-xs-12. Jest to bardziej bootstrapowe rozwiązanie i nie musisz dodawać float: left; oraz width: 100%; do tych klas.

PS. Co do nazewnictwa klas polecam Ci metodologię BEM :) http://getbem.com/

1 użytkowników online, w tym zalogowanych: 0, gości: 1