Problem z wysokością strony

sajmon17099 · 3 Maj 2016 11:56

Witam, to będzie na dziś, a nawet pewnie na dłużej, chyba mój ostatni temat w tym dziale, nie chciałem tak spamować tematami ale to na razie mój największy problem ze stroną. Mianowicie ustawiłem dla <html> i <body>

{ height: 100%; width: 100%; margin: 0; }

żeby potem móc ustawić wysokość dla pewnego diva na 100%, żeby był aż na sam dół strony. Wydarzyło się coś dziwnego, bo wtedy div ten się powiększył nie na dół strony ale jeszcze bardziej, tak że można już było scrollować stronę. Myślałem jednak, że mi się udało, ale jak dodałem element który obniżał stronę jeszcze bardziej, to zobaczyłem że div nie obniżył się i nie schodził na sam dół strony. To już było dziwne, ale po dodaniu tła (gradientów) zobaczyłem, że wszystko co miało ustawione height na 100% kończy się w tym samym momencie i nie chce zejść na dół, co skutkuje tym:

Jak ustawi się height na 100vh efekt jest taki sam. Co robię źle?

HTML:

!DOCTYPE html
html lang="pl"
head
titleTytuł/title
meta name="generator" content="Bluefish 2.2.8" 
meta name="author" content="" 
meta name="date" content="2016-05-03T13:40:31+0200" 
meta name="copyright" content=""
meta name="keywords" content=""
meta name="description" content=""
meta name="robots" content="index, nofollow"
meta http-equiv="content-type" content="text/html"; charset="ISO-8859-2" 
meta http-equiv="content-type" content="application/xhtml+xml"; charset="ISO-8859-2"
meta http-equiv="content-style-type" content="text/css"
meta http-equiv="expires" content="0"
link rel='shortcut icon' type='image/x-icon' href='favicon.png' /
link rel="stylesheet" href="style/css/main.css" type="text/css"
/head
body

article id="bg1"
div class="topleftlogo"
/div
header/header
aside class="leftside" id="bg2"
p style="font-family: Blogger Sans; font-size: 32px;"Spis Treści:/p


/aside
nav class="topbar" id="bg2"Nawigacja/nav

div class="main" id="bg3"Tu jest tekst/div

/article

/body
/html

CSS:

html, body, article { height: 100%; width: 100%; margin: 0; }
.topleftlogo {
    width: 186px;
    height: 186px;
    border-style: solid; border-width: 20px; border-image: url("../../files/media/images/core/border.png") 20 fill repeat;
    background: url("../../files/media/images/core/logo.png") no-repeat center center, linear-gradient(to bottom right, #efffe6, #abefaf);
    float: left;
    border-style: solid; border-width: 20px; border-image: url("../../files/media/images/core/border.png") 20 fill repeat;
}

.topbar{
    width: calc(100% - 246px);
    height: 10vh;
    border-style: solid; border-width: 20px; border-image: url("../../files/media/images/core/border.png") 20 fill repeat;
    position: fixed;
    top: 0;
    right: 0;
    left: 206px;
    float: right;
    z-index: 5;
}

.leftside {
    width: 10vw;
    height: 100%;
    border-style: solid; border-width: 20px; border-image: url("../../files/media/images/core/border.png") 20 fill repeat;
}

.main {
    width: 65vw;
    height: calc(100% - 10vh);
    border-style: solid; border-width: 20px; border-image: url("../../files/media/images/core/border.png") 20 fill repeat;
    float: right;
    position: absolute;
    right: 10vw;
    top: 20vh;
}

#bg1{
    background: linear-gradient(to bottom right, #efffe6, #abefaf);
}

#bg2{
    background: linear-gradient(to bottom left, #ffedb9, #fffee2);
}

#bg3{
    background: linear-gradient(#f8fff5, #def8df);
}

Fizyda · 3 Maj 2016 12:06

height: calc(100% - 10vh);

sajmon17099 · 3 Maj 2016 12:09

To to jest problemem?

Fizyda · 3 Maj 2016 12:13

To jest rozwiązanie. Jak podajesz rozmiar w % to bierzesz pod uwagę rozmiar który przeglądarka “oddaje” do dyspozycji stronie. Ustawiłeś 100% czyli np 700px ale dodatkowo masz jeszcze element który zajmuje Ci 10vh wysokości. Więc jeśli chcesz by element pod nim wypełnił resztę tej przestrzeni musisz uwzględnić wysokość tego obiektu nad nim.

PS. Musisz uwzględnić jeszcze wysokości obramowań oraz ewentualne marginesy lub zmienić box-sizing.

sajmon17099 · 3 Maj 2016 12:16

Ale przecież ten element odejmuje od 100% 10vh.

Fizyda · 3 Maj 2016 12:20

Sorki nie zauważyłem, poza tym to było części rozwiązania zobacz postscriptum poprzedniego postu tam masz dalszą część rozwiązania problemu.

sajmon17099 · 3 Maj 2016 12:27

OK, ale w czym uwzględnić? I jeszcze

“nim” czyli czym?

PS. Te postscriptum było naprawdę przydatne, gdybym od samego początku wiedział że można zmienić box-sizing to miałbym trochę mniej problemów ze stroną, ale chodzi mi o rozmieszczenie elementów i ich rozmiar. Dalej za to nie wiem jak rozwiązać ten problem z wysokością. Chcę żeby zawsze było 100% wysokości strony, i żeby elementy niżej też były tym obejmowane tj. żeby wszystkie elementy z ustawionym 100% wysokości szły na sam dół, zwłaszcza gdy jest więcej tekstu i wysokość samej strony się zwiększa przez co trzeba scrollować. Tak jakby chcę żeby wysokość się dostosowywała, a nie była ustawiona w jednym miejscu, przez co dalej divy i inne elementy nie chcą się pokazywać na samym dole tylko zatrzymują się przy jakiejś dziwnej granicy.

Fizyda · 3 Maj 2016 12:36

Nie skroją się bo ustawiasz m na sztywno wysokość.

Co do rozmiaru musisz mieć coś na wzór tego:

height: calc(100% - 10vh - bordersizetop- bordersizebotop);

w zależności jakie tam rozmiary poustawiałeś no i ile tych obramowań i marginesów jest, wszystko to musisz poodejmować.

Poza tym ja już nie rozumiem co ty chcesz uzyskać.

sajmon17099 · 3 Maj 2016 12:41

Chcę by wysokość body, html i innych znaczników z ustawioną wysokością na 100% się dopasowała do tekstu i do innych elementów, zwłaszcza innych divów. Dzięki temu te elementy by miały wysokość na sam dół, wtedy divy by szły bardziej na dół i tło gradientowe by było dopasowane. Teraz jest wysokość ustawiona na 100%, ale się nie zwiększa jak się przewinie stronę zbytnio w dół. Widać to na screenshocie w zaznaczonym fragmencie.

anon61273179 · 3 Maj 2016 13:33

Według mnie prawdopodobną przyczyną problemów są floaty, potrzebny jest clearfix. Dlaczego? Elemnty clearfix sa wyjęte ze struktury strony jakby i tylko dodanie clearfix ten problem rozwiążuje, stąd mogą być problemyvz wyswietlaniem pewnych kontenerów poprawnie.

sajmon17099 · 4 Maj 2016 14:51

Clearfix niestety mi nie pomógł. Efekt jest taki sam jaki był. Kod po zastosowaniu clearfix:

HTML:

<!DOCTYPE html>
<html lang=“pl”>
<head>
<title>Tytuł</title>
<meta name=“generator” content=“Bluefish 2.2.8” >
<meta name=“author” content="" >
<meta name=“date” content=“2016-05-03T22:10:00+0200” >
<meta name=“copyright” content="">
<meta name=“keywords” content="">
<meta name=“description” content="">
<meta name=“robots” content=“index, nofollow”>
<meta http-equiv=“content-type” content=“text/html”; charset=“ISO-8859-2” >
<meta http-equiv=“content-type” content=“application/xhtml+xml”; charset=“ISO-8859-2”>
<meta http-equiv=“content-style-type” content=“text/css”>
<meta http-equiv=“expires” content=“0”>
<link rel=‘shortcut icon’ type=‘image/x-icon’ href=‘favicon.png’ />
<link rel=“stylesheet” href=“style/css/main.css” type=“text/css”>
</head>
<body>

<article id=“bg1” class=“floatfix”>
<div class=“topleftlogo”>
</div>
<header></header>
<aside class=“leftside” id=“bg2”>
<p style=“font-family: Blogger Sans; font-size: 32px;”>Spis Treści:</p>

</aside>
<nav class=“topbar” id=“bg2”>Nawigacja</nav>

<div class=“main” id=“bg3”>Tu jest tekst</div>

</article>

</body>
</html>

CSS:

html, body, article { height: 100%; width: 100%; margin: 0; }
.topleftlogo {
    width: 186px;
    height: 186px;
    border-style: solid; border-width: 20px; border-image: url("…/…/files/media/images/core/border.png") 20 fill repeat;
    background: url("…/…/files/media/images/core/logo.png") no-repeat center center, linear-gradient(to bottom right, #efffe6, #abefaf);
    float: left;
    border-style: solid; border-width: 20px; border-image: url("…/…/files/media/images/core/border.png") 20 fill repeat;
    z-index: 5
}

.topbar{
    width: calc(100% - 246px);
    height: 10vh;
    border-style: solid; border-width: 20px; border-image: url("…/…/files/media/images/core/border.png") 20 fill repeat;
    position: fixed;
    top: 0;
    right: 0;
    left: 206px;
    float: right;
    z-index: 4;
}

.leftside {
    width: 186px;
    height: 100%;
    border-style: solid; border-width: 20px; border-image: url("…/…/files/media/images/core/border.png") 20 fill repeat;
}

.main {
    width: 65vw;
    height: calc(100% - 10vh);
    border-style: solid; border-width: 0 0 0 20px; border-image: url("…/…/files/media/images/core/border2.png") 20 fill repeat;
    float: right;
    position: absolute;
    right: 10vw;
    top: 20vh;
}

#bg1{
background: linear-gradient(to bottom right, #efffe6, #abefaf);
}

#bg2{
background: linear-gradient(to bottom left, #ffedb9, #fffee2);
}

#bg3{
    background: linear-gradient(#f8fff5, #def8df);
}
.floatfix {
    zoom:1;
}
.floatfix:after {
    content:’’;
    display:block;
    clear:both;
}

anon61273179 · 5 Maj 2016 14:33

Ja stosuję taki kod: (ja mam jeszcze element :before).

.clearfix:before, 

clearfix:after {

	content:"";

	display:table;

}



.clearfix:after {

	clear:both;

}

Czemu usilnie chcesz sprawić by strona miała wysokość 100%?

sajmon17099 · 5 Maj 2016 18:34

Inaczej, chce żeby elementy szły na sam dół, a jak widać na załączonym screenshocie nie idą na dół, pasek po lewej i tło nie idą na sam dół tylko się zatrzymują w pewnym momencie.