Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

DIV-Container mit variabler Höhe

Frage Entwicklung HTML

Mitglied: dimaqw

dimaqw (Level 1) - Jetzt verbinden

17.05.2016 um 10:45 Uhr, 495 Aufrufe, 4 Kommentare, 1 Danke

Hallo!

Kurz zu meinem Problem: ich habe 3 DIVs (Header, Container und Footer), die untereinander stehen. Es muss erreicht werden, dass #container die restliche Höhe vom Fenster annimmt.

01.
<!DOCTYPE html> 
02.
<html lang="de"> 
03.
<head> 
04.
	<style>      
05.
		html, body { 
06.
			height: 100%; 
07.
			margin: 0; 
08.
09.
		body { 
10.
			background-color: blue; 
11.
12.
		#header { 
13.
			background-color: red; 
14.
			height: 200px; 
15.
16.
		#container { 
17.
			background-color: green; 
18.
19.
		#footer { 
20.
			background-color: yellow; 
21.
			height: 100px; 
22.
23.
	</style> 
24.
</head> 
25.
<body> 
26.
	<div id="header"> 
27.
	header 
28.
	</div>	 
29.
	<div id="container"> 
30.
	container 
31.
	</div>	 
32.
	<div id="footer"> 
33.
	footer 
34.
	</div>		 
35.
</body> 
36.
</html>
Wenn #container zu wenig Inhalt hat, habe ich das Problem, dass der Footer zu weit oben steht. Wenn ich bei #container {min-height: 100%;} reinschreibe, wird der Bereich zu groß. Ich bräuchte so was wie #container {height: Resthöhe;}.

Danke im Voraus!
Mitglied: colinardo
LÖSUNG 17.05.2016, aktualisiert um 11:34 Uhr
Hallo dimaqw,
hier mal eine mögliche Variante mit CSS3 und calc()
https://jsfiddle.net/h1kabqj3/

Wenn der Footer stattdessen am unteren Rand immer fest stehen soll ,also immer sichtbar sein soll auch wenn der Haupt-Content länger ist, musst du den Footer als position:fixed und bottom:0px definieren.
https://jsfiddle.net/bt7dLaec/1/

Ansonsten ein sehr bekanntes Framework für solche Sachen ist Flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grüße Uwe
Bitte warten ..
Mitglied: wiesi200
17.05.2016 um 11:25 Uhr
Hallo,

entweder Javascript, oder
nen Feststehenden Footer der immer am unteren Rand sichbar ist.
Bitte warten ..
Mitglied: emeriks
17.05.2016 um 11:26 Uhr
Hi,
als HTML-Dino würde ich jetzt <table> nehmen. Die mittlere <tr> mit height="*". Oder so ...

E.
Bitte warten ..
Mitglied: dimaqw
17.05.2016 um 12:01 Uhr
Schönen Dank! Mit calc() hat es geklappt!
Bitte warten ..
Neuester Wissensbeitrag
Off Topic

"Ich habe nichts zu verbergen"

(2)

Erfahrungsbericht von FA-jka zum Thema Off Topic ...

Ähnliche Inhalte
JavaScript
gelöst Externen DIV-Container via jQuery anzeigen (6)

Frage von Akrosh zum Thema JavaScript ...

HTML
gelöst Iframe wird zu klein in div angezeigt (7)

Frage von Thomas91 zum Thema HTML ...

Hyper-V
Benötige Hilfe bei Hyper-V-Core 2016 div. Befehle gesucht (4)

Frage von Stefan007 zum Thema Hyper-V ...

Heiß diskutierte Inhalte
Linux Netzwerk
gelöst DHCP vergibt keine Adressen (31)

Frage von Maik82 zum Thema Linux Netzwerk ...

Exchange Server
gelöst Bestehende eMails autoamatisch weiterleiten (22)

Frage von metal-shot zum Thema Exchange Server ...

Switche und Hubs
LAG zwischen SG300-Switches macht Probleme. Wer weiß Rat? (20)

Frage von White-Rabbit2 zum Thema Switche und Hubs ...

Apache Server
gelöst Lets Encrypt SSL mit Apache2 (20)

Frage von banane31 zum Thema Apache Server ...