Sponsor-Board.de

Sponsor-Board.de > Community > Hilfe > Scripting > [S]Hilfe für mein HTML-Problem
Normale Version: [S]Hilfe für mein HTML-Problem
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.

moser96

28.04.2013, 21:14
Hallo Leute,

Ich habe ein Problem und zwar möchte ich eine Box oben haben mit 80px und width: 100% und die 2. sollte darunter liegen mit overflow:hide und den Rest der Seite ausfüllen. Ich poste weiter unter meinen Quellecode ein sowie eine kleines Bild zur Veranschaulichung von meinem kleinen Problem.

Problem: Das habe ich soweit hinbekommen, jedoch geht die Scrollbar über das Browserfenster (Chrome, Firefox und IE) hinaus...

Bild:

http://1.2.3.9/bmi/www10.pic-upload.de/28.04.13/cb3snq2fuiy.png(!https)

Code:

Zitat:
<!DOCTYPE html>
<html>
<head>
<style>
#oben
{
background: red;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
#unten
{
position: absolute;
top: 80px;
height: 100%;
width:100%;
background: yellow;
overflow: auto;
}
</style>
</head>
<body>
<div id="oben" />
<div id="unten">
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
</div>
</body>
</html>


Gegenleistung:

  • Danke
  • ...


Mit freundlichen Grüßen
Moser Michael

befla

28.04.2013, 22:14
URL zur Seite? Ich sehe kein Bild

Tealk

28.04.2013, 22:23
mit overflow:hide

height: 100%;
width:100%;
background: yellow;
overflow: auto;

also du widersprichst dir damit selber außerdem heißt es richtig overflow: hidden;
dazu gibt aber bitte eine feste höhe an

MeinEnergy

29.04.2013, 10:00
Hallo,

wenn ich mir das mal anschaue sieht das so aus:
[Link: Registrierung erforderlich]

Zitat:
Problem: Das habe ich soweit hinbekommen, jedoch geht die Scrollbar über das Browserfenster (Chrome, Firefox und IE) hinaus...


Bei mir geht da nichts über das Browserfenster hinaus. Die Obere Box ist nur getrennt von der unteren Wink

Evtl. hilft dir das ja weiter Wink Habe es mit Seitenrand aber fließend gemacht

Code:
<head>
<title>Yellow and Red</title>
<style type="text/css">
<!--
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #FFF;
    margin: 0;
    padding: 0;
    color: #000;
}


ul, ol, dl {
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;    
    padding-right: 15px;
    padding-left: 15px;
}


.container {
    width: 80%;
    max-width: 1260px;
    min-width: 780px;
    background-color: #FF0;
    margin: 0 auto;
}


.header {
    background-color: #F00;
}


.content {
    padding: 10px 0;
}


.content ul, .content ol {
    padding: 0 15px 15px 40px;
}


.footer {
    padding: 10px 0;
    background-color: #F00;
}

.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft {
    float: left;
    margin-right: 8px;
}
.clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
-->
</style></head>

<body>

<div class="container">
  <div class="header">Header</div>
  <div class="content">
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br /></div>
  <div class="footer">
    <p>Fußzeile</p>
</div>
</div>
</body>
</html>

moser96

29.04.2013, 14:14
Sry Leute wahrscheinlich habe ich es so schlecht erklährt. Ich versuche es nochmal. Eine Box (die rote im Bild) ist oben fixiert und soll nicht mitscrollen. (width: 100% und height: 80px)

Die 2.Box (gelb am Bild) soll darunter sein und der Content soll scrollbar sein, jedoch sollte die Scrollbar wirklich erst unter der roten Box anfangen und im Fenster aufhören.

Jedoch dadurch das die Höhe 80 px vom oberen ist move ich die gelbe Box 80px nach unten, dadurch ändert sich jedoch nicht die 100 % für die Höhe des gelben und die gelbe box wird 80 px außerhalb des Browserfensters geschoben.

Bild so sollte es aussehen:
[Link: Registrierung erforderlich]

MeinEnergy

29.04.2013, 14:46
Also bei mir macht dein Code genau das, was du auch möchtest. In meinem Browser sieht es genau so aus wie auf deinem Bild.

moser96

29.04.2013, 14:52
MeinEnergy bitte beachte mal die Scrollbar genauer bzw. schiebe sie ganz nach unten... die wandert über das Fensterhinaus, jedoch nicht sichtbar.
MFG

MeinEnergy

29.04.2013, 16:30
Denn nimm doch einfach mein beispiel Wink
Sponsor-Board.de > Community > Hilfe > Scripting > [S]Hilfe für mein HTML-Problem
Referenz-URLs