Kraft absolut positionierte div nicht überschneiden
Ich habe eine header bar, positioniert ist, mit position:absolute;
und ich kann nicht scheinen, um es zu nicht überschneiden sich meine Inhalte.
Hier ist der html-ich bin für mein Beispiel:
<div class="ui-page ui-page-active">
<div class="ui-header">
<div class="ui-title ui-title-h1">
Page Title 1
</div>
</div>
<div class="ui-content">
<a href="#pg-two">Page Two</a>
</div>
<div class="ui-footer">
<div class="ui-title ui-title-h3">
Page Footer 1
</div>
</div>
</div>
und hier ist meine css -
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.ui-page {
background-color: #bbb;
height: 100%;
width: 100%;
display: block;
position: relative;
}
.ui-page-inactive {
display: none;
}
.ui-page-active {
display: block;
}
.ui-header {
position: absolute;
top: 0;
background-color: #000;
width: 100%;
display: inline-block;
}
.ui-content {
}
.ui-footer {
position: absolute;
bottom: 0;
background-color: #000;
width: 100%;
display: inline-block;
}
.ui-title {
text-align: center;
color: #fff;
padding: 4px;
line-height: 150%;
}
.ui-title-h1 {
font-size: 1.5em;
font-weight: 900;
}
Mein end-Ziel ist es, eine header-Leiste immer an der Spitze, eine footer-Leiste immer am unteren Rand und für den Inhalt zu füllen Zentrum. Der content-div nicht eigentlich füllen müssen 100%, ich möchte nur nicht, dass es gesperrt werden, indem Sie entweder die Kopfzeile oder die Fußzeile.
Ist das ganze Ding soll passen genau zu der Größe des browser-Fensters?
100% Breite, 100% min-height | Aber die Höhe erweitern kann um +100% - Ansicht. Wird diese Anzeige auf einem mobilen Gerät.
100% Breite, 100% min-height | Aber die Höhe erweitern kann um +100% - Ansicht. Wird diese Anzeige auf einem mobilen Gerät.
InformationsquelleAutor rlemon | 2011-09-28
Du musst angemeldet sein, um einen Kommentar abzugeben.
Eine einfache Möglichkeit wäre es, entweder padding-top oder margin-top (ich bin mir nicht sicher, welche).ui-content auf die Höhe der Kopfzeile, drängen würde .ui-Inhalte nach unten, so dass es nicht überlappen.
Es gibt mehrere Möglichkeiten, das zu erreichen, was Sie versuchen zu tun, was ich sagte, war der einfachste Weg. Eine andere Möglichkeit wäre, schweben alle divs auf der linken Seite, dann die überschrift würde bleiben an der Spitze. Ein anderer Weg wäre die position der ui-Inhalte absolut, und es gibt wohl ein Dutzend mehr Möglichkeiten, es zu tun. Aber ich kenne keine Magische Kombination, halten Sie sich gegenseitig überlagern. Was ist falsch mit ein wenig top-padding/margin?
Nichts wirklich. Sie wissen, wenn Sie Holen Sie sich eine Idee in Ihrem Kopf. Sie wollen etwas tun, ohne oder mit bestimmten Kriterien.. aber mit keiner wirklichen Begründung, warum ?
InformationsquelleAutor Barry Franklin
Wenn der header und der footer eine Feste Höhe (wie zum Beispiel "80px"), dann kannst du den Inhalt absolut mit den oberen und unteren Rand (position:absolute;overflow-y:scroll;top:80px;bottom:80px;) und stellen Sie die Kopf-und Fußzeile fest (position:fixed;height:80px;top:0;left:0;right:0;overflow:hidden; für den header und position:fixed;height:80px;bottom:0;left:0;right:0;overflow:hidden; für die Fußzeile)
Sowas funktionieren könnte.
InformationsquelleAutor Amanda