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, 519 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 (3)

Frage von Yanmai zum Thema CSS ...

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

Neue Wissensbeiträge
Batch & Shell

Batch - ein paar Basics die man kennen sollte

Tipp von Pedant zum Thema Batch & Shell ...

Microsoft

Restrictor: Profi-Schutz für jedes Window

(6)

Tipp von AlFalcone zum Thema Microsoft ...

Batch & Shell

Batch zum Zurücksetzen eines lokalen Profils

Tipp von Mr.Error zum Thema Batch & Shell ...

Heiß diskutierte Inhalte
Windows Server
Benutzer lässt sich nur an einem Clientcomputer anmelden (11)

Frage von Ammann zum Thema Windows Server ...

Hosting & Housing
gelöst Webserver bei WIX, aber DNS Server wo anders (9)

Frage von laster zum Thema Hosting & Housing ...

Hyper-V
Virtualisierung eines Servers (7)

Frage von Lornsti zum Thema Hyper-V ...