Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Få rätt höjd på div i flexbox

Svara
2018-06-18, 16:15
  #1
Skogsten
Medlem
Jag har skapat en flex-box för att dela upp min hemsida i en header, ett innehåll och en footer. I länken visar jag hur jag gjort:

https://imgur.com/a/y90OWPz

Jag har gjort såhär för att få ner footern till botten av sidan, och sträcka ut mitten så den precis täcker skärmen. Det funkar bra! Men det finns ett problem: Jag vill kunna lägga in innehåll i mitten-diven, som blir exakt lika högt som mitten-diven. Så jag vill att den gråa fyrkanten i bilden ska bli samma höjd som den gröna fyrkanten.

Hur får man till det? Jag har provat att ange height: 100% i den gråa diven, men då blir den samma storlek som hela skärmen, och det vill jag ju inte.

Hur gör jag så den gråa fyrkanten får rätt storlek?

Tack på förhand!
Citera
2018-06-18, 20:14
  #2
Mulle-Meth
Medlem
Mulle-Meths avatar
Skulle du kunna posta din HTML samt CSS? I sådana fall ska jag försöka hjälpa dig
Citera
2018-06-18, 21:30
  #3
Skogsten
Medlem
Citat:
Ursprungligen postat av Mulle-Meth
Skulle du kunna posta din HTML samt CSS? I sådana fall ska jag försöka hjälpa dig

Visst, koden är lite lång, men jag kopierar in den nedan. Kortar ner lite så du ser vad jag frågar om.

HTML-kod: 

<body>

	<div class="pageflex">
		<div class="headerdiv">
			<h1 class=logga_x>Logga</h1>
			<ul class="navi">
				<li><a href="index.html">Hem</a></li>
				<li><a href="kont.html">Kontakt</a></li>
				<li><a href="info.html">Info</a></li>
				<li><a href="lankar.html">Länkar</a></li>
			</ul>
		</div>

		<div class="middle_c">
			<div class="middlebar">

			</div>
		</div>

		<footer></footer>	
	</div>
</body>

Min Css nedan:

Kod: 
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

.headerdiv {
	width: 100%;
	height: 100px;
	min-width: 720px;
}

footer {
	width: 100%;
	height: 60px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.pageflex {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pageflex .headerdiv {
	order: 1;
	flex-basis: 100px;
}

.pageflex .middle_c {
	order: 2;
	flex-basis: 9999px;	
}

.pageflex footer {
	order: 3;
	flex-basis: 100px;
}
__________________
Senast redigerad av Skogsten 2018-06-18 kl. 21:32.
Citera
2018-06-18, 22:18
  #4
Mulle-Meth
Medlem
Mulle-Meths avatar
Citat:
Ursprungligen postat av Skogsten
Visst, koden är lite lång, men jag kopierar in den nedan. Kortar ner lite så du ser vad jag frågar om.

HTML-kod: 

<body>

	<div class="pageflex">
		<div class="headerdiv">
			<h1 class=logga_x>Logga</h1>
			<ul class="navi">
				<li><a href="index.html">Hem</a></li>
				<li><a href="kont.html">Kontakt</a></li>
				<li><a href="info.html">Info</a></li>
				<li><a href="lankar.html">Länkar</a></li>
			</ul>
		</div>

		<div class="middle_c">
			<div class="middlebar">

			</div>
		</div>

		<footer></footer>	
	</div>
</body>

Min Css nedan:

Kod: 
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

.headerdiv {
	width: 100%;
	height: 100px;
	min-width: 720px;
}

footer {
	width: 100%;
	height: 60px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.pageflex {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pageflex .headerdiv {
	order: 1;
	flex-basis: 100px;
}

.pageflex .middle_c {
	order: 2;
	flex-basis: 9999px;	
}

.pageflex footer {
	order: 3;
	flex-basis: 100px;
}

Okej, så om jag förstår dig rätt så vill du att den gråa kvadraten ska ha en likvärdig marginal högst upp och längst ned?

Ha i åtanke att det var länge sedan jag höll på med sådana här saker men jag ska försöka skriva ett litet exempel åt dig. Återkommer om ett tag
Citera
2018-06-18, 22:37
  #5
Mulle-Meth
Medlem
Mulle-Meths avatar
Jag är ingen expert och det var ett tag sedan jag höll på med detta, men det här kan säkert vara lite av en ledtråd åtminstone

HTML

HTML-kod: 
<body>

<div class="firstdiv">
    <div class="seconddiv">
    </div>
</div>

</body>

CSS

Kod: 
.firstdiv {
display:inline-flex;
width:100%;
height:500px;
background-color:lightgrey;
}

.seconddiv {
margin:auto 5px;
margin-left:900px;
width:300px;
height:300px;
background-color:red;
}

Att jag la till "margin-left:900px" är verkligen ett fulhax, men av någon anledning så fungerar inte "float:right", antagligen för att vi håller på och bökar med flex eller dylikt.

Du får ta mitt exempel med en nypa salt och som en liten spark i rätt riktning

Lycka till!
Citera
2018-06-24, 17:01
  #6
Mulle-Meth
Medlem
Mulle-Meths avatar
Om du fortfarande har problem med detta så skulle jag verkligen rekommendera att använda dig av CSS-grid istället!
Citera
Svara

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback