Nehmen Sie genau 29px von der Spitze meiner div, ohne es zu bewegen?

Ich habe ein Website-Layout bestehend aus 4 Divs.Nehmen Sie genau 29px von der Spitze meiner div, ohne es zu bewegen?

<div class="global"> 
<div class="content"> 
</div> 
<div class="top"> 
</div> 
<div class="footer"> 
</div> 
</div>

das hat die folgenden Stil angewendet

div.top{ 
position:fixed; 
top:0px; 
width:100%; 
height:28px; 
background-color:rgb(55,55,55); 
border-bottom:1px solid black; 
}

die folgende Art

diese

div.content{ 
position:absolute; 
bottom:0; 
top:28px; 
width:100%; 
background:transparent; 
margin:auto; 
padding:0; 
}

das Problem, das ich angelegt hat, ist

div.footer{ 
position:fixed; 
float:right; 
bottom:0px; 
left:87.5%; 
border:1px solid:black; 
border-bottom:0; 
}

und das hat mich mit dem Inhalt div, ich w ant es direkt unterhalb der Spitze und weiter unten auf dem Rest der Seite, aber es geht über den unteren Rand der Seite von genau so vielen px Ich setze auch die Position von oben. Jetzt, da ich px für die Größe der Spitze verwende, kann ich kein Perzentil anwenden, also was wäre der beste Weg, dies nur mit CSS zu tun.

Die Website, die ich dieses Bedürfnis nach ist http://www.andysinventions.info/test/ und das Problem kann auf der Registerkarte „Forums“

tl sehen; dr wie kann ich über die Seitengrenzen gehen stoppen meine div?

Quelle

2012-04-04 Andrew Fairbairn

Andrew,

Nach über die Antworten zu suchen (die zum größten Teil richtig sind) und Ihre Website - ich bemerkt, dass Sie Iframes verwenden. Im Jahr 2012 gehören iFrames als Design-Feature der Vergangenheit an, nur um als Drittanbieter-Ergänzungen wie Offsite-Widgets und Feeds (oder Sandboxing) verwendet zu werden.

Sie benötigen eine Seite wie diese zu strukturieren, was Sie sich für:

<!doctype html> 
<html> 
    <head> 
    <title>A title</title> 
    <link href="style.css" rel="stylesheet" /> 
    </head> 
    <body> 
    <ul id="menu"> 
     <!-- menu content here --> 
    </ul> 
    <!-- Actual page content here --> 
    </body> 
</html>

Im style.css haben diese Regeln:

body { margin: 28px 0 0; } 

ul#menu { 
    position: absolute; 
    top: 0; 
    left: 0; 
    }

Dies sollte erreichen, was Sie suchen mit moderner Technik.

Quelle

2012-04-04 19:57:28

Vielen Dank, ich weiß, iframes sind Jahre alt und ich wollte wirklich etwas anderes verwenden, ich konnte einfach nicht das Richtige finden, obwohl ich noch in der Lage sein muss, ein Ziel auf der Seite für das Laden der Seiten festzulegen in, kann dies getan werden, oder müsste ich das Menü auf jeder Seite haben? –

Normalerweise schließen Sie einfach ein ('header.php'); an der Spitze aller Ihrer Dateien, vorausgesetzt, Sie verwenden keinen Autoloader oder ein Framework, das es für Sie tun kann. Header.php würde normalerweise Ihre zu Ihrem Tag hinzufügen. –

Ich habe gerade festgestellt, dass Sie gerade HTML für diese Site machen, vielleicht möchten Sie etwas PHP verwenden. Ihr Server unterstützt es wahrscheinlich, da ich sehe, dass Sie auch Apache ausführen, und diese beiden sind oft gepaart. –

anstelle der absoluten Position und oben, versuchen margin-top: 28px:

div.content{ 
    bottom:0; 
    width:100%; 
    background:transparent; 
    margin: 28px auto 0 auto; 
    padding:0; 
}

Quelle

2012-04-04 19:28:36 Gavriel

Dies geschieht, weil Sie oben verwenden: 28px;, um die obere Leiste nach unten zu bewegen. Stattdessen sollten Sie ein margin-top verwenden: 28px; und nehmen Sie die absolute Positionierung heraus.

div.content{ 
    width:100%; 
    background:transparent; 
    margin:28px auto 0 auto; 
    padding:0; 
}

Quelle

2012-04-04 19:30:42 Drew

Verdoppeln Sie nie auf solche Stile ... Verwenden Sie 'margin: 28px auto 0;' wie Flöcsy gepostet –

Ich stimme zu, ich ging weiter und änderte die Antwort. Ich habe gerade meine Chrome-Entwicklerwerkzeuge eingefügt. Danke, dass du darauf hingewiesen hast. – Drew

Ich habe immer noch das gleiche Problem, dass ich 28px auf dem Overscroll der Seite verliere. –

Nehmen Sie genau 29px von der Spitze meiner div, ohne es zu bewegen?

Antwort

Verwandte Themen