Forum PHP.pl > [CSS]Problem z divem jednym pod drugim i height

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Problem z divem jednym pod drugim i height

degistivepl

5.04.2018, 14:05:43

Cześć mam problem z elementami jeden pod drugim w CSS.

[CSS] pobierz, plaintext 
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
header {
    background-color: red;
    text-align: center;
    padding: 20px;
    width: 100%; 
}
aside {
    background-color: #3b3b3b;
    width: 200px;
    position: absolute;
    height: 100%;  
 
}
[CSS] pobierz, plaintext

[HTML] pobierz, plaintext 
<body>
        <header> 
            <a href="#" class="link"><i class="fa fa-reorder"></i>Zamówienia</a>
            <a href="#" class="link"><i class="fa fa-home"></i>Strona główna</a> 
        </header>
        <aside>
        </aside>
        <main> 
        </main>
        <footer>
 
        </footer>
    </body>
[HTML] pobierz, plaintext

Problem w tym, że dodaje mi suwak na długość elementu header i nie potrafię sobie z tym poradzić.

leonpro778

5.04.2018, 14:15:54

Problem jest w padding. Nie możesz sobie ustawiać ot tak sobie paddingu w px a szerokość w %. Zmień header na:

[CSS] pobierz, plaintext 
header {
    background-color: red;
    text-align: center;
    padding: 20px;
    display: block;
}
[CSS] pobierz, plaintext

degistivepl

5.04.2018, 14:20:38

Usunęło dolny suwak, ten z boku nadal jest.

trueblue

5.04.2018, 14:39:28

<aside> ma 100% wysokości. Więc razem z <header> mają więcej.

degistivepl

5.04.2018, 14:42:02

Wiem o tym, ale jak to zrobić z tym paddingiem w header.

trueblue

5.04.2018, 14:43:23

A jaki chcesz efekt osiągnąć?

degistivepl

5.04.2018, 14:47:34

No żeby nie dodawało suwaka po boku jeśli mam ten header i aside oraz żeby aside było do końca strony (tak jak height 100%).

trueblue

5.04.2018, 14:53:11

Ale jeśli treści w <aside> lub <main> będzie dużo to ma być suwak, tak? Jeśli tak, to poszukaj w Google pod hasłem: sticky footer.

leonpro778

5.04.2018, 14:59:02

Cytat(degistivepl @ 5.04.2018, 15:05:43 )

Problem w tym, że dodaje mi suwak na długość elementu header i nie potrafię sobie z tym poradzić.

Pisałeś tylko o header. Co do bocznego paska to:

[CSS] pobierz, plaintext 
aside {
    background-color: #3b3b3b;
    width: 200px;
    height: 100%;
	position: fixed;
}
[CSS] pobierz, plaintext

P.s. Osobiście nadal nie wiem jaki ma być efekt końcowy

degistivepl

5.04.2018, 15:22:37

Chodzi o to, że chce u góry strony menu (header) i pod nim z lewej strony menu (aside) i żeby aside był do końca strony (tak jakby 100%) ale bez suwaków.

leonpro778

5.04.2018, 15:29:49

Zmieniłeś aside na fixed?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.