Jak sprawić by div użył całą resztę możliwego miejsca?


(sajmon17099) #1

Witam. Poprzednio robiłem stronę, ale z powodu pewnych błędów przestałem ją robić. I zrobiłem sobie długą przerwę, a teraz postanowiłem zrobić tę stronę od początku.

I jest praktycznie gotowa, mam tylko jeden problem.

Jak mogę sprawić za pomocą HTML lub CSS (nie chcę JavaScriptu bo jeszcze go nie umiem) by div (w tym przypadku .NavigationLeftBackground) użył resztę dostępnego miejsca? Żeby w ogóle się pojawił muszę mu dać określoną wysokość, a ja chcę by uzupełniał on to czego .NavigationLeftText nie zapełni. .NavigationLeftText miał się rozciągać z samej góry aż na sam dół ale przez to że ma

display: table;

to dopasowuje się on do tekstu i nie chce się rozciągnąć jeszcze bardziej. Dlatego zrobiłem nowego diva który ma uzupełnić te braki tylko że ten div nie chce się (nie wiem dlaczego) dopasować gdy nie ma sprecyzowanej wysokości. Sprawia to że tak naprawdę ten div zbytnio nic nie da i będzie miał zły rozmiar gdy div .Main będzie od niego większy (będzie taka pusta przestrzeń między dołem a divem .NavigationLeftBackground).

 

WIEM ŻE MOJE WYJAŚNIENIE NIE JEST DO KOŃCA JASNE, ALE STARAŁEM SIĘ TO WYTŁUMACZYĆ NAJLEPIEJ JAK UMIEM.

Sami zobaczycie o co mi chodzi. Poza tym ta strona jest ciągle aktualizowana więc po odpowiedzi możecie zobaczyć jak to wygląda po dodaniu poprawek. Przepraszam za reklamy, ale to darmowy hosting i nic z tym zrobić nie mogę.

 

Tu jest mój kod (w tym akurat kodzie jest mniej tekstu w divach, jak wejdziecie na tę moją stronę to zobaczycie o co mi chodzi, dałem tam ten tekst po to żeby zobaczyć jak divy reagują na powiększanie się z powodu tekstu, tutaj w tym kodzie były te linie tekstu poprzednio ale według mnie ten temat byłby zbyt długi gdybym ich nie usunął):

HTML:

<!DOCTYPE html>



<html>



<head>



<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" />



<meta name="Description" content="Takie tam w internetach" />



<meta name="Keywords" content="blog,recenzje,imageboard,sajmonsite" />



<title>SaJmoNSite</title>



<link rel="Stylesheet" type="text/css" href="styles/main.css" />



</head>



<body class="page">







<div class="MainParent">



  <div class="NavigationLeft">



    <nav class="NavigationLeftText">



    <div class="NavigationLeftBorder"></div>



      Table of content </br>



      Text </br>



    </nav>



  <div class="NavigationLeftBackground">



  <div class="NavigationLeftBorder"></div>



  </div>



  </div>







  <header class="NavigationTop">



    Navigation



  </header>







  <div class="Main">



    <div class="Title">



      <h1>Title</h1>



    </div>



    <div class="Text">



      Text </br>    



    </div>



    <div class="MainBorder"></div>



  </div>







</div>







</body>

 

CSS:

@font-face {



	font-family: 'Jaapokki';



	src: url('/fonts/jaapokki-regular.ttf');



}



@font-face {



	font-family: 'BloggerSans';



	src: url('/fonts/Blogger_Sans.otf');



}











html, body {



	height: 100%;



}







.page {



	background: linear-gradient(#2d5aa4, #03637c);



	height: 100%;



	margin: 0;



	background-repeat: no-repeat;



   background-attachment: fixed;



   position: relative;



}







.NavigationLeft {



	display: flex;



	flex-direction: column;



	position: absolute;



	top: 0;



	bottom: 0;



	left: 0;



	min-height: 100vh;



	width: 220px;



}



.NavigationLeftText {



	display: table;



	background: linear-gradient(to right, #636363, #4e4e4e);



	position: relative;



	left: 0px;



	top: 0px;



	bottom: 0px;



	width: 220px;



	height: 100vh;



	z-index: 2;



	font-family: BloggerSans;



	font-size: 1.5em;



}



.NavigationLeftBorder {



	background: linear-gradient(to right, #292929, #171617);



	position: absolute;



	right: 0;



	top: 0;



	bottom: 0;



	width: 10px;



	z-index: 3;



}



.NavigationLeftBackground {



	background: linear-gradient(to right, #636363, #4e4e4e);



	z-index: 1;



	position: relative;



	left: 0;



	bottom 0;



	top: 0;



	width: 220px;



	min-height: 100vh;



}







.MainParent {



	position: relative;



	min-height: 100%;



}







.NavigationTop {



	background: linear-gradient(#636363, #4e4e4e);



	position: absolute;



	left: 220px;



	width: calc(100vw - 230px);



	height: 75px;



	z-index: 1;



	font-family: Jaapokki;



	font-size: 2em;



}







.Main {



	display: table;



	background: linear-gradient(#ffffff, #e8e8e8);



	position: absolute;



	top: 20vh;



	bottom: 0px;



	width: 50vw;



	left: 220px;



	margin-left: 17vw;



	height: 70vh;



	z-index: 4;



	padding-left: 40px;



}







.MainBorder {



	background: linear-gradient(#f79104, #e9720d);



	position: absolute;



	top: -10px;



	bottom: 0;



	left: 0;



	width: 40px;



	min-height: 100%;



}







h1 {



	font-family: 'Jaapokki';



	text-align: center;



	font-size: 3em;



}







.Text {



	font-family: 'BloggerSans';



	font-size: 2em;



}

 


(kokoxD) #2

Nie jestem 100% pewien czy o to ci chodzi a możesz to zrobić przez wartości procentowe

np menu ustawiasz na width: 40% a treść na 60% dodajesz float:left do obu najlepiej i jeszcze na początku wrzucasz

*{
    box-sizing: border-box;
}

A i jeśli potrzebujesz konkretnego rozmiaru strony to zamknij to wszystko <div id=“pojemnik”> i jemu określ szerokość w piksleach

Ale mogę się mylić specem nie jestem.

 


(sajmon17099) #3

Trochę nie wiem o co ci chodzi. Chcę by .NavigationLeftBackground się samo dopasowywało żeby uniknąć takiej sytuacji gdy rozmiar div jest określony.

 

Chcę żeby to wyglądało w ten sposób:

http://i.imgur.com/gHYKpI2.png

Teraz już chyba będzie wiadomo o co mi chodzi.


(kokoxD) #4

Sorki napisałem to nieczytelnie ale nie rozumiem do końca o co ci chodzi Napisze krótki kod i powiedz czy o to ci chodzi:

<div id="menu"></div>

<div id="tresc"></div>

*{



 box-sizing: border-box;

}



#menu{



 width: 25%;

 float: left;

}

#tresc{

 width: 75%;

 float: left;

}

I w ten sposób powinieneś mieć stronę podzieloną na 25% strony menu 75% treść. O to ci chodzi?


(sajmon17099) #5

Niestety, chodzi mi o coś kompletnie innego. Chodzi mi o takie coś:

mam diva po lewej i chcę by zawsze sięgał samego dołu strony. Przez to jednak że dopasowuje się on do tekstu (bo ma ustawione display:table), to jak coś na stronie będzie większe niż ten div (np. tak jak na obrazku, ten tekst po prawej był o wiele większy niż div po lewej) to będzie widać pustą przestrzeń, a tego nie chcę. Zrobiłem więc drugiego diva który ma być po prostu takim tłem i wypełniaczem, i ma on wypełnić wszystko to czego nie wypełni ten div z tekstem (ten div z ustawionym display:table). Jednak nie wiem dlaczego, ten div który jest takim tłem nie chcę się rozciągnąć na sam dół i niestety ale będzie tylko takiej wielkości jaką mu się poda. Jak więc sprawić by sam się dostosowywał do warunków i zapełniał co może a nie jakąś konkretną ilość (bo jak określi mu się ilość to albo będzie za duży albo za mały co sprawi że będzie widać pustą przestrzeń albo w divie po lewej albo w divie po prawej, tym z tekstem, tym z białym tłem co widać na obrazku)?


(kokoxD) #6

Pokombinowałbym z tym kodem ale dałbyś radę zrobić ten kod czytelnym? Po teraz nie potrafię się połapać gdzie się zaczyna a gdzie się kończy div.

Chodzi mi o taki zapis

<div>

   <div>

      <div></div>

   </div>

</div>


(sajmon17099) #7

Poprawione!

Poprzednio przekopiowałem kod w jedno miejsce, potem go skopiowałem z powrotem i tak wyszło dziwnie.


(Fizyda) #8

Efekt którego oczekujesz zrobisz za pomocą height:100% ale dopiero w tedy gdy porządnie zakodujesz stronę, w tej chwili masz za dużo niepotrzebnych div’ów, wyświetlania elementów jako tabel, pozycjonowania relatywnego i absolutnego, a to wszystko powoduje niejako wyjęcie elementów z reszty strony i nie działa ci ustawianie dynamicznej wysokości. Tutaj masz przykład: https://jsfiddle.net/p69b293n/


(sajmon17099) #9

Musiałem ustawić display: table żeby div dostosowywał się do tekstu. Musiałem robić też inne divy bo nic by nie działało.

Jeśli mam to poprawić, to jak? Unikałem jak najbardziej robienia niepotrzebnych divów.


(Fizyda) #10

Jeśli uważasz że to jest Ci potrzebne:

<div class="NavigationLeftBackground">

  <div class="NavigationLeftBorder"></div>

</div>

i to:

<div class="NavigationLeftBorder"></div>

oraz te wszystkie reguły:

.Main {

    bottom: 0;

    display: table;

    height: 70vh;

    left: 220px;

    margin-left: 17vw;

    padding-left: 40px;

    position: absolute;

    top: 20vh;

    width: 50vw;

    z-index: 4;

}

.NavigationLeft {

    bottom: 0;

    display: flex;

    flex-direction: column;

    left: 0;

    min-height: 100vh;

    position: absolute;

    top: 0;

    width: 220px;

}

.NavigationLeftText {

    bottom: 0;

    display: table;

    height: 100vh;

    left: 0;

    position: relative;

    top: 0;

    z-index: 2;

}

i kwiatek:

.MainParent {

    min-height: 100%;

    position: relative;

}

to w takim razie nie zam się na robieniu stron internetowych i nie słuchaj moich rad.


(sajmon17099) #11

Nie mówię że ty nie umiesz, raczej chodzi mi o to że ja po prostu inaczej nie umiem. Jeśli np. wyrzucę ten zbędny kod to wiem że na pewno będę miał jakieś problemy z innymi divami bo nie robiłbym tych divów w innym celu, więc pomógł byś mi je potem rozwiązać?


(Fizyda) #12

Problemy masz bo sam je sobie stworzyłeś, dosłownie. Jak już wywalisz zbędny kod który Ci wszystko psuje i utrudnia w tedy możesz zacząć robić całość od początku tylko dobrze. To co ja wypisałem to tylko pierwsze z brzegu przykłady bo nawet nie chciało mi się za bardzo zagłębiać w ten kod, więc jak usuniesz tylko to co napisałem to na 100% nadal będziesz miał problemy.

 

Zrobiłem Ci działający przykład i dałem do niego linka po Twoich postach raczej mogę stwierdzić że w niego nawet nie zajrzałeś więc bardziej nie mogę Ci pomóc.


(sajmon17099) #13

Zajrzałem tam (nie nie teraz, wcześniej) i jest to nawet pomocne, tylko że na początku też raczej w ten sposób jak w przykładzie pisałem ten kod, tylko natknąłem się na problemy które wymagały zrobienia ode mnie nowych divów.

No ale skoro jednak to przez te divy, to usunę je (i kilka innych też) żeby kod był jak najprostszy i wtedy jak coś nie będzie działać to poproszę o pomoc (albo poszukam innych rozwiązań). W każdym razie, dzięki za odpowiedzi, nie myślałem że to te divy stanowiły problem.


(Fizyda) #14

Problem stanowi co z nimi robisz i jaki efekt one dają. Dodatkowo co chcesz za ich pomocą osiągnąć jest zagadką.