Javascript css解决方案，用于在div中重现引导导航栏行为

Bootstrap的导航栏在移动设备上非常好，可以提供页眉、页脚和滚动内容的原生感觉，例如：

<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>

切换导航






一个
两个
三个
一个
两个
三个
一个
两个
三个
一个
两个
三个
一个
两个
三个
一个
两个
三个
一个
两个
三个
一个
两个
三个
一个
两个
三个
一个
两个
三个
一个
两个
三个
一个
两个
三个

联合国页脚。。。

这个HTML占据了整个视口，这是“手机”所需要的

在我的应用程序中，在PC上，我有时希望此HTML包含在地图覆盖弹出窗口中

我可以使用Bootstrap的面板或modals来实现这一点，但以响应的方式实现这一点需要javascript中的媒体查询，我希望避免这种情况

是否有一种方法可以仅使用css@media查询来实现这一点

在我到目前为止所做的尝试中，页眉和页脚始终为全视口宽度，并固定在视口的顶部和底部。

找到了解决方案，避免了引导

然后，我执行了以下CSS以获得我想要的切换（电话/更宽的屏幕）：

.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;
}

---

我会尝试做一个JSFIDLE

你能创建一个你想要的图像模型吗？@xxLITxx如果你用手机和PC导航到，希望你能理解我的意思。这就是你想要的结果吗？或者你还在寻找一些不同的东西吗？只需要一点html，不需要修改javascript就好了：）