div pomimo nadania height 100% nie jest rozsciągnięty na całą stronę

0

Mam taki problem długo nie programowałem i mam problem z podstawową rzeczą, a mianowicie mam 3 diy div 1 (navbar) nie jest rozciągnięty na całą stonę w momencie kiedy na div2 (navbar2) dam dużo br to div1 się nie rozciąga.druga sprawa jest taka, że jak dam 4 diva (navbar4) wewnątrz diva2 to jest div3 nie widoczny.

<link href="./bootstrap-3/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="./bootstrap-3/js/bootstrap.min.js"></script>
<link href="./style.css" rel="stylesheet" media="screen">

<div class=navbar>

</div>

<div class=navbar2>
    <div class=navbar4>
xvfd
    </div>
</div>
<div class=navbar3>

</div>

body {
    
    
 background-color: gray;   
    
    
    
    
    
    
}

.navbar {
    overflow: hidden;
    background-color: #333;
    clear:both;
    float: left;
    width: 7%; /* Full width */
    opacity: 0.5;
    min-height: 50px;
    height: 100%;
}	

.navbar2 {
    overflow: hidden;
    top: 0; /* Position the navbar at the top of the page */
    width: 86%; /* Full width */
    opacity: 0.5;
    float: left;
    min-height: 50px;
    height: 100%;
}	

.navbar3 {
    overflow: hidden;
    background-color: #333;

    width: 7%; /* Full width */
    opacity: 0.5;
}	

.navbar4 {
    background-color: #FF00FF;
    width: 20%; /* Full width */
    opacity: 0.5;
    min-height: 50px;
    height: 100%;
}	

.navbar5 {
    overflow: hidden;
    background-color: #333;

    width: 7%; /* Full width */
    opacity: 0.5;
    min-height: 50px;
    height: 100%;
}
0

odpal jsfiddle i powiedz co chcesz zrobic

.myDiv {
    background-color: red;
    width: 100%;
    max-height: 100%;
}

tu masz diva ktory rozciaga sie na cala szerokosc ekranu

jezeli chcesz by byl niezalezny od parenta to ustaw mu absolute i pozycje (na lewo) 0

0

To nie dało rezultatu, chcę skonstruować diva którego wysokość będzie się rozciągała na cały ekran.

0

Z tego co pamiętam, wewnętrzny div rozciągnie się na wysokość parenta, np. div wewnątrz body. Jak body ma wysokość np. 300px, to i wewnętrzny div będzie miał max 300px, nie pociągnie tego na wysokość okna. Musi zostać 'rozepchany' przez jakąś treść, inaczej sam z siebie nie rozciągnie się na wysokość całego okna przeglądarki. Możesz to obkodować JSem (looknij: https://stackoverflow.com/a/1818757/5497893), jeżeli zawsze potrzebujesz 100% wysokości diva w stosunku do wysokości okna.
Idąc za sugestią @fasadin mógłbyś opisać co docelowo chcesz osiągnąć?

0

To może jeszcze raz wyjaśnię chcę żeby div navbar navbar2 i navbar3 rozciągnął się na cały ekran na razie tylko tyle.

0

To pozostaje Ci chyba tylko rozszerzenie diva nadrzędnego na 100% (albo od razu divów docelowych) via JS (w linku ze stackoverflow jest cały skrypt od tego). Można dorzucić jeszcze metodę $(window).on('resize aby aktualizować wysokość diva po zmianie rozmiaru okna przeglądarki.

0

Tylko problem w tym, że ja mam ustawione wszystkie divy na 100%.
http://uploadfile.pl/pokaz/1219304---2yls.html

0

diva dajesz na zewnątrz contenerów, zaraz po <body> jak nie działa to masz coś uwalone w css bootstrapa, ew. testowo spróbuj dać przy wartościach !important;

0

Dobra już sobie poradziłem obeszłem trochę ten problem dodałem br i jest rozciągnięte

0

Zrobiłem to trochę inaczej dałem zamiast % to dałem px i jest dobrze.

    height: 1900px;
0

Tylko teraz jak zrobić taki efekt, żeby jak w navbar6 się zapełni cała strona to, żeby rozszerzał wszystkie divy nie tylko navbar6 daje jeszcze raz kod

<link href="./bootstrap-3/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="./bootstrap-3/js/bootstrap.min.js"></script>
<link href="./style.css" rel="stylesheet" media="screen">
<script src="./jquery.js"></script>
<script>



</script>
<div class=navbar0>
<div class=navbar>

</div>

<div class=navbar2>
    <div class=navbar4>
<br><br><br><br><br>
<hr class=hr>
<li id=li><a class=menu href=hiper>STRONY WWW</a></li>
<hr class=hr>
<li id=li><a class=menu href=hiper>KALKULATOR</a></li>
<hr class=hr>
<li id=li><a class=menu href=hiper>KONTAKT</a></li>
<hr class=hr>
 


    </div>
    <div class=navbar6>

    </div>
</div>
<div class=navbar3>

</div>
</div>


body {
    
    
 background-color: gray;   
    
    
    margin: 0px;
    
    
    
}
.navbar0 {
    
 min-height: 100%;   
    
    
    
    
    
    
    
    
}
#li {

margin-left: 10px;





}
.hr {
    
 border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));  
}
.navbar {
    overflow: hidden;
    background-color: #333;
    clear:both;
    float: left;
    width: 7%; /* Full width */
    opacity: 0.5;
    height: 1900px;
}	

.navbar2 {
    overflow: hidden;
    top: 0; /* Position the navbar at the top of the page */
    width: 86%; /* Full width */
    float: left;
    min-height: 100px;

}	

.navbar3 {
    overflow: hidden;
    background-color: #333;

    width: 7%; /* Full width */
    opacity: 0.5;
    height: 1900px;
}	

.navbar4 {
    background-color: #374549;
    width: 23%; /* Full width */
    min-height: 100px;
    float: left;
    height: 1900px;
}	

.navbar5 {
    overflow: hidden;
    background-color: #333;

    width: 7%; /* Full width */
    opacity: 0.5;
    min-height: 100%;
    height: 1900px;
}	
.navbar6 {
    overflow: hidden;
    background-color: white;

    width: 77%; /* Full width */
    height: 1900px;

}
0

a mozesz wrzucic to na jsfiddle i wtedy wytlumaczyc o co Ci chodzi?

0

@pol90: stary, kod to jest jakiś koszmar... Brak podstawowego doctype, brak head, body, brak jakiegokolwiek " w klasach, powtarzane id non stop.. Najpierw ogarnij kod semantycznie (https://validator.w3.org/) a potem spróbujemy pomóc, bo teraz to jest jakaś masakra... Żadna przeglądarka tego nie udźwignie. A dawanie 1900px na sztywno, to jest w ogólnie nie do przyjęcia, o RWD słyszałeś?
Nie odbierz tego źle, ale doprowadź ten kod prosimy do ładu i składu jak trzeba i potem możemy się zastanawiać co jeszcze poprawić...

0

Już sobie z tym poradziłem tym, żeby te divy po rozciągnięciu był równe trzeba było dla divów nadrzędnych dać wartość

display: flex;

0
pol90 napisał(a):

Zrobiłem to trochę inaczej dałem zamiast % to dałem px i jest dobrze.

    height: 1900px;

Weź pod uwagę, że na np komórce to nie zadziała. U innych użytkowników z różnymi rozdzielczościami też nie. Także to złe rozwiązanie.
Ogólnie to polecam Flexboxa do takich zabaw z ustawianiem komponentów.

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