Bootstrap 4.0-具有图像+导航栏+全高主体的响应头 [英] Bootstrap 4.0 - responsive header with image + navbar + full-height body
问题描述
我正在使用引导程序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>
我创建了一个plunkr，它实际上显示了整个页面:
https://plnkr.co/edit/GQHoephQyx3hoejgkT4k?p=preview
I created a plunkr which actually shows the whole page:
https://plnkr.co/edit/GQHoephQyx3hoejgkT4k?p=preview
在Bootstrap 4.0中，正确显示页面的正确方法是什么，即使用图像在缩小/增长时根据屏幕尺寸剩下的全部剩余高度?
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?
编辑进行说明:
内容本身应具有滚动条，但不应具有整个页面. IE.带有图像和菜单栏的标题应始终保持可见状态，而随后显示的内容(如有必要)应具有滚动条.
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.
推荐答案
而不是设置定义的高度，而是使用flexbox使内容区域填充其父容器(在这种情况下为主体)的高度.
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://www.codeply.com/go/fKNRvG0Hak
注意: flex-fill实用程序类将包含在下一个Bootstrap 4版本中: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9
Note: The flex-fill utility class will be included in the next Bootstrap 4 release: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9
类似的问题:
是在Bootstrap 4中使用flex-grow使嵌套行填充其父级以填充视口高度吗?
Bootstrap 4导航栏和内容填充高度弹性框
在导航栏上方的Bootstrap 4页宽标题栏
Similar questions:
Make a nested row fill its parent that has been made to fill viewport height using flex-grow in Bootstrap 4?
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap 4 page wide header bar above navbar
这篇关于Bootstrap 4.0-具有图像+导航栏+全高主体的响应头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
