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, 533 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 ..
Ähnliche Inhalte
CSS
DIV Container einheitliche Höhe (7)

Frage von Yanmai zum Thema CSS ...

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 ...

Neue Wissensbeiträge
Heiß diskutierte Inhalte
Viren und Trojaner
Ransomware .nm4 (14)

Frage von Zyklo92 zum Thema Viren und Trojaner ...

Microsoft Office
+1.000 Ordner in Outlook: Wie besser? (11)

Frage von Matsushita zum Thema Microsoft Office ...

Zusammenarbeit
Administrator Verhalten nach Vertragskündigung (10)

Frage von sysbone zum Thema Zusammenarbeit ...