Top-Themen

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

Mitglied: dimaqw

dimaqw (Level 1) - Jetzt verbinden

17.05.2016 um 10:45 Uhr, 612 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
Frage von YanmaiCSS7 Kommentare

Hallo ihr Administratoren, ich habe DIVs mit der display: inline-block Eigenschaft. An sich funktioniert alles, aber wenn in einem ...

JavaScript

Funktion ausführen nach Refresch von DIV Container

gelöst Frage von wiesi200JavaScript2 Kommentare

Hallo, ich hab gerade auf Grund meiner bescheidenen JavaScript Kenntnisse Probleme beim Ausführen einer Funktion. Aktuell habe ich auf ...

JavaScript

Aktualisieren von DIV Containern per JavaScript

gelöst Frage von wiesi200JavaScript4 Kommentare

Hallo erstmal. aktuell Programmiere ich eine Webseite zur Statusanzeige unserer Fertigungsmaschinen. Ansich nicht's spannendes. Der Grundaufbau ist aktuell vereinfacht ...

JavaScript

Externen DIV-Container via jQuery anzeigen

gelöst Frage von AkroshJavaScript6 Kommentare

Hallo zusammen, wir haben ein Serverraummonitoring für 4 Räume das derzeit auf einer PHP-Weboberfläche basiert! In diese Weboberfläche haben ...

Neue Wissensbeiträge
Windows 10
Zero-Day-Lücke in Microsoft Edge
Information von kgborn vor 1 TagWindows 10

In Microsofts Edge-Browser klafft wohl eine nicht geschlossene (0-Day) Sicherheitslücke im Just In Time Compiler (JIT Compiler) für Javascript. ...

Sicherheit
Microsoft und Skype: Sicherheit
Information von kgborn vor 1 TagSicherheit

Die Tage gab es ja einige Berichte zur Sicherheit des Skype-Updaters. Der Updater von Skype läuft unter dem Konto ...

Datenschutz

Behörden ignorieren Sicherheitsbedenken gegenüber Windows 10

Information von Penny.Cilin vor 2 TagenDatenschutz8 Kommentare

Hallo, passend zum Thema Ablösung LIMUX in München ein interessanter Beitrag dazu: Behörden ignorieren Sicherheitsbedenken gegenüber Windows 10 Anscheinend ...

Sicherheit
Information Security Hub Munich airport
Information von brammer vor 2 TagenSicherheit

Hallo, Neues Center für Cyber Kriminalität am Münchener Flughafen brammer

Heiß diskutierte Inhalte
DSL, VDSL
Mindestgeschwindigkeiten DSL Telekom
Frage von justlukasDSL, VDSL14 Kommentare

Hallo zusammen, Seit diesem Jahr habe ich Verständnisprobleme mit dem Verhalten der Telekom. Wir haben seit einem Jahr VDSL ...

Switche und Hubs
LANCOM-Switch: Probleme (no link) mit SFP-Modulen?
Frage von THETOBSwitche und Hubs11 Kommentare

Hi zusammen, ich habe folgendes Problem: Und zwar habe ich an einem Standort drei Switche verbaut - LANCOM GS-2326P+, ...

Humor (lol)
Was könnte man mit einem Server machen? Idee gesucht
Frage von 2SeitenHumor (lol)11 Kommentare

Hey Zusammen Ich habe einen alten HP G2 Rackserver zu Hause rumliegen. 28GB Ram, 1xAMD Prozi mit etwa 2GHz. ...

Firewall
RB2011 Firewall Rule eine bestimmte Mac oder IP Adresse nicht zu blockieren
Frage von lightmanFirewall10 Kommentare

Hallo liebes Forum mit ihren Spezialisten. Ich habe meine Firewall so konfiguriert das kein Endgerät ohne meine Speziellen Erlaubnis ...