Question

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的面板或模式来实现这一点，但是以响应的方式实现这一点需要javascript中的媒体查询，我想避免这种情况。

有没有办法只使用css @media查询来实现这个目标？

在我迄今为止所做的尝试中，页眉和页脚始终是全视口宽度，并粘贴到视口的顶部和底部。

Answer 1

找到解决方案here，它避免了bootstrap

然后我做了以下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;
}

我会尝试做一个jsFiddle

css解决方案来重现div中的bootstrap导航栏行为

1 个答案: