Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen (A bis Z)

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

JavaScript
gelöst Funktion ausführen nach Refresch von DIV Container (2)

Frage von wiesi200 zum Thema JavaScript ...

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

Frage von Thomas91 zum Thema HTML ...

Linux Tools
gelöst Bash Script contains Bilden und nutzen (19)

Frage von OIOOIOOIOIIOOOIIOIIOIOOO zum Thema Linux Tools ...

Neue Wissensbeiträge
Ubuntu

Ubuntu 17.10 steht zum Download bereit

(3)

Information von Frank zum Thema Ubuntu ...

Datenschutz

Autofahrer-Pranger - Bewertungsportal illegal

(8)

Information von BassFishFox zum Thema Datenschutz ...

Windows 10

Neues Win10 Funktionsupdate verbuggt RemoteApp

(8)

Information von thomasreischer zum Thema Windows 10 ...

Microsoft

Die neuen RSAT-Tools für Win10 1709 sind da

(2)

Information von DerWoWusste zum Thema Microsoft ...

Heiß diskutierte Inhalte
Router & Routing
Allnet - VDSL2 Modem - SFP (mini-GBIC) (20)

Frage von Dobby zum Thema Router & Routing ...

Monitoring
Netzwerk-Monitoring Software (18)

Frage von Ghost108 zum Thema Monitoring ...

Windows 10
Seekrank bei Windows 10 (17)

Frage von zauberer123 zum Thema Windows 10 ...

Windows Server
gelöst Kopiervorgang schlägt fehl, weil Datei- und Ordnername zu lang sind (14)

Frage von Schroedi zum Thema Windows Server ...