CSS-Lösung Bootstrap navbar Verhalten innerhalb eines div

Question

Bootstrap des NavBars groß sind auf mobilen Geräten zu reproduzieren für eine native Gefühl mit Kopf- und Fußzeilen geben und Scrollen Inhalt, zB:

<div class="dialog "> 
<nav id="header" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li id="form-link"><a href="#">Form</a></li> 
     <li id="list-link"><a href="#">List</a></li> 
     <li id="more-link"><a href="#">More</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<div id="content"> 
    <ul class="list-group"> 
    <li class="list-group-item">One</li> 
    <li class="list-group-item">Two</li> 
    <li class="list-group-item">Three</li> 
    <li class="list-group-item">One</li> 
    <li class="list-group-item">Two</li> 
    <li class="list-group-item">Three</li> 
    <li class="list-group-item">One</li> 
    <li class="list-group-item">Two</li> 
    <li class="list-group-item">Three</li> 
    <li class="list-group-item">One</li> 
    <li class="list-group-item">Two</li> 
    <li class="list-group-item">Three</li> 
    <li class="list-group-item">One</li> 
    <li class="list-group-item">Two</li> 
    <li class="list-group-item">Three</li> 
    <li class="list-group-item">One</li> 
    <li class="list-group-item">Two</li> 
    <li class="list-group-item">Three</li> 
    <li class="list-group-item">One</li> 
    <li class="list-group-item">Two</li> 
    <li class="list-group-item">Three</li> 
    <li class="list-group-item">One</li> 
    <li class="list-group-item">Two</li> 
    <li class="list-group-item">Three</li> 
    <li class="list-group-item">One</li> 
    <li class="list-group-item">Two</li> 
    <li class="list-group-item">Three</li> 
    <li class="list-group-item">One</li> 
    <li class="list-group-item">Two</li> 
    <li class="list-group-item">Three</li> 
    <li class="list-group-item">One</li> 
    <li class="list-group-item">Two</li> 
    <li class="list-group-item">Three</li> 
    <li class="list-group-item">One</li> 
    <li class="list-group-item">Two</li> 
    <li class="list-group-item">Three</li> 
    </ul> 
</div> 
<nav class="navbar navbar-default navbar-fixed-bottom"> 
    <div class="container"> 
    Un footer ... 
    </div> 
</nav> 

Diese HTML nimmt die gesamter Viewport, der auf 'Telefonen gesucht wird.

In meiner App, auf PCs, würde ich manchmal möchten, dass HTML in z. ein Kartenüberlagerungs-Popup.

Ich könnte dies mit Bootstrap Panels oder Modals tun, aber implementieren dies in einer reaktionsschnellen Art würde erfordern Medienabfragen in Javascript, die ich gerne vermeiden würde.

Könnte es einen Weg geben, dies nur mit css @media Abfragen zu erreichen?

In den Versuchen, die ich bisher gemacht habe, sind die Kopf- und Fußzeilen immer volle Ansichtsfensterbreite und bleiben am oberen und unteren Rand des Ansichtsfensters.

Answer 1

eine Lösung here gefunden, und es vermeidet Bootstrap

Ich habe dann die folgende CSS die Umschaltung (Telefon/größeren Bildschirm), die ich wollte zu bekommen:

.dialog { 
    position: fixed; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
} 

article { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
} 

.dialog header { 
    width: 100%; 
    height: 3em; 
    padding: 5px; 
    background-color: #FF8C00; 
} 

.dialog h1 { 
    margin-top: 5px; 
    font-size: 20px; 
} 

.dialog footer { 
    display: none; 
} 

.dialog .content { 
    position: absolute; 
    top: 3em; 
    bottom: 0; 
    width: 100%; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
} 

hr { 
    border-style: solid; 
    border-color: black; 
    border-width: 1px 0 0 0; 
} 

/********************************************************************************* 
* Adjustments for PCs and tablets 
*********************************************************************************/ 
@media (min-width: 768px) { 
.dialog { 
    top: 50px; 
    bottom: 50px; 
    left: 50px; 
    right: 50px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #808080; 
    border-radius: 8px; 
} 
.dialog .content { 
    bottom: 3em; 
} 
.dialog header { 
    border-top-right-radius: 8px; 
    border-top-left-radius: 8px; 
} 
.dialog footer { 
    display: initial; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 3em; 
    background-color: #FF8C00; 
    border-bottom-right-radius: 8px; 
    border-bottom-left-radius: 8px; 
} 

Ich werde versuchen und tun a jsFiddle