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

HTML div mit height 100prozent vom Body

Frage Entwicklung HTML

Mitglied: B-free

B-free (Level 1) - Jetzt verbinden

04.04.2013, aktualisiert 13:31 Uhr, 1686 Aufrufe, 5 Kommentare

Hallo,

ich habe ein Problem. mein selbst gebastelter HTML Code will nich so wie ich will.
ich mache html jetzt seit drei Wochen, und habe mir eine Seite gebastelt, die einen grauen Hintergrund hat, und darauf ein roten "<div id="all">" der wiederum den gesamten Inhalt beinhaltet.

mein Code sieht so aus:

01.
<!DOCTYPE HTML> 
02.
<html lang="de"> 
03.
 
04.
<head> 
05.
<meta charset="UTF-8"> 
06.
<title>Webseitentitel - Home</title> 
07.
<link rel="stylesheet" href="style.css" type="text/css" media="screen"> 
08.
</head> 
09.
 
10.
<body> 
11.
<div id="All"> 
12.
<div id="title"><b>&#10031;Antons Website&#10031;</b></div> 
13.
 
14.
<h1 style="text-align:center;font-family:;color:#300000;"> Home </h1> 
15.
 
16.
<div id="line"></div> 
17.
 
18.
<p></p> 
19.
 
20.
<div id="MainBorder"> 
21.
 
22.
	<div id="main"> 
23.
 
24.
                INHALT 
25.
 
26.
	</div> 
27.
 
28.
    <div id="main"> 
29.
 
30.
       INHALT 
31.
 
32.
    </div> 
33.
 
34.
</div> 
35.
 
36.
<div id="leftsidemenu"> 
37.
<p> 
38.
ein link.<br> 
39.
noch ein link.<br> 
40.
und noch einer<br> 
41.
der vierte link!<br> 
42.
noch einer.<br> 
43.
6.<br> 
44.
</p> 
45.
</div> 
46.
 
47.
<div id="footer"> 
48.
FOOTER TEXT 
49.
</div> 
50.
 
51.
</div> 
52.
</body> 
53.
</html>
Meine Style.css sieht so aus:

01.
 
02.
html, body { 
03.
      background-color: #333333; 
04.
      padding: 10px; 
05.
      height: 100%; 
06.
07.
 
08.
#All { 
09.
 
10.
      Width:800px; 
11.
      margin:auto; 
12.
      min-height:100%; 
13.
      height:100%; 
14.
      background-color:#b40000; 
15.
      border-radius:40px; 
16.
      padding:40px; 
17.
      overflow: hidden !important; 
18.
      position:relative; 
19.
 
20.
    -moz-border-radius:10px; 
21.
    -webkit-border-radius:10px; 
22.
    box-shadow:0 2px 2px rgba(0,0,0, .5); 
23.
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); 
24.
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); 
25.
 
26.
27.
 
28.
#title { 
29.
 
30.
 
31.
	color:#300000; 
32.
	letter-spacing:20px; 
33.
	font-size:50px; 
34.
	text-align:center; 
35.
 
36.
37.
 
38.
#main { 
39.
 
40.
      color:#300000; 
41.
      font-size:18px; 
42.
      width:560px; 
43.
      font-size:14px; 
44.
      border-radius:9px; 
45.
      border:3px solid #BF3B19; 
46.
      padding:10px; 
47.
      background-color:#BF3B19; 
48.
      float:left; 
49.
      margin-right:9px; 
50.
      margin-bottom:9px; 
51.
 
52.
    -moz-border-radius:10px; 
53.
    -webkit-border-radius:10px; 
54.
    box-shadow:0 2px 2px rgba(0,0,0, .5); 
55.
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); 
56.
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); 
57.
 
58.
59.
 
60.
#leftsidemenu { 
61.
 
62.
    width:165px; 
63.
    height:300px; 
64.
    padding:10px; 
65.
    float:left; 
66.
    background-color:#930000; 
67.
    border-radius:9px; 
68.
 
69.
    -moz-border-radius:10px; 
70.
    -webkit-border-radius:10px; 
71.
    box-shadow:0 2px 2px rgba(0,0,0, .5); 
72.
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); 
73.
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); 
74.
 
75.
76.
 
77.
#MainBorder { 
78.
 
79.
      width:560px; 
80.
      float:left; 
81.
      margin-right:35px; 
82.
 
83.
 
84.
85.
#footer { 
86.
 
87.
      color:#300000; 
88.
      height:20px; 
89.
      border:3px solid #BF3B19; 
90.
      background-color:#BF3B19; 
91.
      padding:2px; 
92.
      border-radius:3px; 
93.
      text-align:center; 
94.
      position:absolute; 
95.
      bottom:10px; 
96.
      left:120px; 
97.
 
98.
    -moz-border-radius:10px; 
99.
    -webkit-border-radius:10px; 
100.
    box-shadow:0 2px 2px rgba(0,0,0, .5); 
101.
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); 
102.
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); 
103.
 
104.
105.
 
106.
/* Lines */ 
107.
 
108.
#line { 
109.
 
110.
	border:1px solid #30000; 
111.
	border-radius:2px 
112.
 
113.
}
Mitglied: flow.ryan
04.04.2013 um 14:00 Uhr
Hallo,

siehe mal bitte hier:
http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html

Damit sollte deine Frage beantwortet sein

Gruß,
Florian.
Bitte warten ..
Mitglied: B-free
04.04.2013, aktualisiert um 16:09 Uhr
Danke!

wenn ich jetzt aber einen Inhalt habe der kleiner ist, dann ist der div "All" trotzdem lang. und zwar länger als nötig. wenn du verstehst?

hat da vielleicht jemand eine Idee wie ich das machen soll?

Tschau
B-Free
Bitte warten ..
Mitglied: Mitchell
14.04.2013 um 00:29 Uhr
"all" wird immer so hoch sein, wie der body, wenn du nach dieser Regel oben gehst.

Was genau willst du denn erreichen? Eine Frage gibt es in deinem Beitrag ja leider nicht und am WE funktioniert meine Glaskugel besonders schlecht ^^

Mfg
Mitchell
Bitte warten ..
Mitglied: B-free
15.04.2013 um 19:49 Uhr
Hallo,

deine Glaskugel geht am WE genau so gut wie in der Woche! ich hatte kein Problem, nur eine falsche Hoffnung von dem was in dem Code zu verstehen geglaubt habe. Die Seite ist immer mindestens bis zur Unterkante des Explorers lang. ich dachte allerdings dies währe ein Fehler. War es aber nicht!

Gruß
B-Free

PS. welches Modell ist deine Glaskugel?
Bitte warten ..
Mitglied: Mitchell
15.04.2013 um 20:42 Uhr
Müsste ich nachgucken, ist noch aus alten Neckermann Beständen die Kugel

Mfg
Mitchell
Bitte warten ..
Ähnliche Inhalte
JavaScript
"mailto" Alternative die einen HTML-Body zulässt?
gelöst Frage von SaschaRDJavaScript4 Kommentare

Hallo zusammen, verwende seit langem die mailto Funktion in einem JavaScript, welches daraus einen href erzeugt und auf der ...

HTML
Seitenwechsel innerhalb einer div-Box in HTML+CSS
gelöst Frage von honeybeeHTML7 Kommentare

Hallo, ich habe mit dem HTML-Tag <div> und CSS folgendes Webseitenschema erstellt: siehe Screenshot unten. Meine Frage: Wenn ich ...

Netzwerkprotokolle
Warum kann ich den HTTP-Body nicht lesen?
Frage von maxmaxNetzwerkprotokolle2 Kommentare

Hallo, Ich wollte heute mit Wireshark meinen HTTP-Traffic analysieren und bin nun verwundert dass ich zwar alle Header-Informationen problemlos ...

Exchange Server
E-mail ohne body text zulassen
Frage von HeinrichMExchange Server10 Kommentare

Hallo zusammen! gibt es eine Möglichkeit, E-Mails ohne Body Text zuzulassen? Wir bekommen immer mehr E-Mail, die von Absendern ...

Neue Wissensbeiträge
Microsoft Office

Deaktivieren von Startbildschirm und Backstage-Ansicht in Office 2016 per Batch-Datei

Anleitung von SarekHL vor 1 StundeMicrosoft Office2 Kommentare

Guten Morgen zusammen! Ich habe mir gestern (auch mit Hilfe dieses Boards) ein Script gebastelt, um in Office 2016 ...

Erkennung und -Abwehr

Sicherheitslücke Spectre und Meltdown: Status prüfen

Anleitung von Frank vor 7 StundenErkennung und -Abwehr2 Kommentare

Nach all den Updates der letzten Woche sollte man unbedingt auch den Status prüfen, ob die Sicherheitslücken Spectre, Meltdown ...

Microsoft Office

Office 2010 Starter erneut auf einer frischen Windows-Version installieren

Tipp von Lochkartenstanzer vor 1 TagMicrosoft Office9 Kommentare

Moin, vor ein paar Tagen schlug bei mir ein Kunde auf, der sein Widnows 7 geschrottet und es inklusive ...

Datenbanken

Upgrade MongoDB 3.4 auf 3.6

Erfahrungsbericht von Frank vor 1 TagDatenbanken

Seit kurzem gibt es das 3.6 Update für die MongoDB: Sicherheit, das Sortieren, Aggregation und auch die Performance wurde ...

Heiß diskutierte Inhalte
Netzwerke
NTFS-Berechtigung
Frage von Daoudi1973Netzwerke23 Kommentare

Hallo zusammen und frohes neues Jahr (Sorry, ich bin spät dran) Meine Frage: 1- Ich habe einen Ordner im ...

Drucker und Scanner
Gesucht DIN A3 Drucker
Frage von NebellichtDrucker und Scanner15 Kommentare

Hallo, ich möchte einen neuen DIN A3 Drucker kaufen. Um ab und zu, ca. 1 mal die Woche Farbausdrucke ...

iOS
Einladung vom iphone kalender
Frage von jensgebkeniOS15 Kommentare

Hallo Gemeinschaft, folgendes Problem - immer wenn ich von meinem Iphone einen Termin einztrage und diesem Termin Teilnehmer zuweise, ...

Batch & Shell
Dateien verschieben mit batch
gelöst Frage von michi-ffmBatch & Shell13 Kommentare

Hallo Zusammen hat jemand evtl eine Idee? Zunächst hier das Skript: Leider werden keine UNC-Pfade unterstüzt, kann mir jemand ...