Bootstrap 4.0 - 带有图像 + 导航栏 + 全高主体的响应式标题 [英] Bootstrap 4.0 - responsive header with image + navbar + full-height body

查看：14
本文介绍了Bootstrap 4.0 - 带有图像 + 导航栏 + 全高主体的响应式标题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 bootstrap 4 构建一个响应式页面，该页面有一个标题/标题部分，其中包含客户徽标的图像、他们的名称和导航栏.所有这些元素都是响应式的，即图像根据屏幕尺寸缩小，导航栏在小屏幕上最小化.

现在我想让身体也以响应的方式.即:用内容填充屏幕的剩余高度，必要时使用滚动条显示所有内容.
但出于某种原因，我无法弄清楚如何在整个高度上跨越页面的其余部分.当它非常适合移动设备时，它要么在某些较大的屏幕上太大，要么在大屏幕上非常适合，但只有它在移动设备上应有的高度的一半.

页面大致是这样构建的:

<html lang="de" style="height:100%"><头><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcFAgWiGinAmAmFcFAGORIGINSIGINX"><title>客户名称</title><body class="main" style="height:100%"><div class="容器"><div class="text-center"><!-- 客户端图像在这里--><h1 style="display:inline;margin-left:0.6em;color:#8b7d7b">客户端名称</h1>

<nav class="navbar navbar-expand-lg navbar-light" style="background-color:#e0eee0"><button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainnavbar" aria-controls="mainnavbar" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span><div id="mainnavbar" class="navbar-collapse collapse justify-content-md-center"><ul class="navbar-nav"><li class="nav-item nav-link active">页面A</li>

</nav><div class="container" style="height:70vh"><div class="row" style="height:100%"><!-- 页面主体--><div class="col-sm-1 col-md-9" style="height:100%"><p class="col-scrol"><!-- 页面的主要部分.内容应具有全高并在必要时垂直滚动 --></p>

<!-- 评论部分(滚动)--><div class="d-none d-md-block col-md-3 comment-section"><!-- 页面左侧的评论部分-->

我创建了一个实际显示整个页面的 plunkr:
https://plnkr.co/edit/GQHoephQyx3hoejgkT4k?p=preview

使用 bootstrap 4.0 显示所需页面的正确方法是什么，即使用图像根据屏幕尺寸缩小/增长时剩余的全部高度?

编辑以进行说明:
内容本身应该有一个滚动条，但不是整个页面.IE.带有图像的标题和菜单栏应该始终可见，而后面的内容应该有一个滚动条(如有必要).

解决方案

不要设置定义的高度，而是使用 flexbox 使内容区域填充其父容器(在本例中为主体)的高度.

body {显示:弹性；弹性方向:列；}.flex-fill {弹性:1 1 自动；}.flex收缩{弹性收缩:0；}

https://codeply.com/go/fKNRvG0Hak

注意: flex-fill 实用程序类将包含在下一个 Bootstrap 4.2 版本中:https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e187b1d9dd3<小时>

类似问题:
Bootstrap 4 使用 flex-grow 制作嵌套行填充父项以填充视口高度
Bootstrap 4 导航栏和内容填充高度 flexbox
导航栏上方的 Bootstrap 4 页宽标题栏

I am building a responsive page with bootstrap 4 which has a heading/title section with an image of the client's logo, their name and a navbar. All these elements are responsive, i.e. the image shrinks according to screen size and the navbar minimizes on small screens.

Now I would like to have the body also in a responsive way. i.e.: fill the remaining height of the screen with content, use a scrollbar to display all the content if necessary.
But for some reason I cannot figure out how to span the remaining part of the page over the whole height. It is either too large on some larger screens, when it fits perfectly for mobile devices, or it fits perfectly on large screens, but has only half the height it should have on mobile devices.

The page is roughly build with this structure:

<!DOCTYPE html>
<html lang="de" style="height:100%">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>Client Name</title>
</head>

<body class="main" style="height:100%">
  <div class="container">
    <div class="text-center">
    <!-- Client image goes here -->
    <h1 style="display:inline;margin-left:0.6em;color:#8b7d7b">Client Name</h1>
   </div>
  </div>
  <nav class="navbar navbar-expand-lg navbar-light" style="background-color:#e0eee0">
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainnavbar" aria-controls="mainnavbar" aria-expanded="false" aria-label="Toggle Navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div id="mainnavbar" class="navbar-collapse collapse justify-content-md-center">
  <ul class="navbar-nav">
    <li class="nav-item nav-link active">Page A</li>
  </ul>
</div>
</nav>
<div class="container" style="height:70vh">
<div class="row" style="height:100%">
  <!-- Main body of page -->
  <div class="col-sm-1 col-md-9" style="height:100%">
    <p class="col-scrol">
      <!-- Main part of the page. Content should have full height and scroll vertically if necessary -->
    </p>
  </div>
  <!-- Comment section (scrolling) -->
  <div class="d-none d-md-block col-md-3 comment-section">
        <!-- Comment section at the left hand side of the page -->      
  </div>
 </div>
 </div>
</body>

</html>

I created a plunkr which actually shows the whole page:
https://plnkr.co/edit/GQHoephQyx3hoejgkT4k?p=preview

What is the correct way, with bootstrap 4.0, to display the page as desired, i.e. use the full remaining height which is left when the image shrinks/grows depending on screen size?

EDIT for clarification:
The content itself should have a scrollbar, but not the whole page. I.e. the header with the image and the menu bar should always stay visible, while the content which comes afterwards should have a scrollbar, if necessary.

解决方案

Instead of setting defined heights, use flexbox to make the content area fill the height of it's parent container (which in this case is the body).

body {
    display:flex;
    flex-direction:column;
}

.flex-fill {
    flex: 1 1 auto;
}

.flex-shrink {
    flex-shrink: 0;
}

https://codeply.com/go/fKNRvG0Hak

Note: The flex-fill utility class will be included in the next Bootstrap 4.2 release: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

Similar questions:
Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap 4 page wide header bar above navbar

这篇关于Bootstrap 4.0 - 带有图像 + 导航栏 + 全高主体的响应式标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆