如何在没有垂直滚动的情况下指定屏幕的全高? - IT屋-程序员软件开发技术分享社区
如何在没有垂直滚动的情况下指定屏幕的全高?
[英] How do I specify the full height of the screen without vertical scrollable?
本文介绍了如何在没有垂直滚动的情况下指定屏幕的全高?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望橙色和蓝色区域位于屏幕的末尾，或者屏幕的全尺寸减去导航栏的高度.一旦我使用 vh-100 它具有全高，但它创建了一个我不想要的垂直滚动条.所以我想要屏幕的全高或没有滚动条的总高度.我怎么做?Bootstrap 中是否有类似 vh-100 - 导航栏高度 的东西，以便一切都适合(但导航栏没有真实"高度.所以我没有定义导航栏的高度)?或者我怎么能说它应该在不创建垂直滚动条的情况下占据整个高度?
<html lang="zh-cn"><头><title>引导程序示例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><身体><div><div class="row m-auto"><div class="col-md-12 p-0"><div><nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">带文本的导航栏</a><按钮类=导航栏切换器"类型=按钮"数据切换=折叠"数据目标=#navbarText"咏叹调控制=导航栏文本"咏叹调扩展=假"aria-label="切换导航"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="navbarText"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a><li class="nav-item"><a class="nav-link" href="#">特征</a><li class="nav-item"><a class="nav-link" href="#">价钱</a><span class="navbar-text">带有内联元素的导航栏文本</span></nav>
<div class="container-fluid"><div class="row"><div class="col-md-4 bg-warning vh-100"><!-- vh-100 --><div><div class="row m-1"><div class="col-md-11">聊天
<div class="col-md-1"><i class="fas fa-plus-circle"></i>
<div class="row mb-2"><div class="col-md-12"><form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}><input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search"/><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button></表单>
<div class="row"><div class="col-md-12"><div class="list-group"><div><a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">列出组项目标题</h5><small>3 天前</small>
<div class="row"><div class="col-md-11">Donec id elit non mi porta...
<div class="col-md-1"><span class="徽章徽章-主要徽章-药丸文本-权利">5</span>
</a>
<div class="col-md-8 bg-primary vh-100"><!-- vh-100 --><div><div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"><div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"><div class="row"><!-- 它应该是全宽，但不幸的是，由于此部分就在此处出现了滚动条... --><div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"><img src="..." class="image-head-chat" alt="响应式图片"/>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">文本
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">图标
<div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">新闻报
<div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">英加贝<div class="row">形式
</html>
我读过这个
解决方案
执行以下操作 -
第 1 步: 从代码中删除所有 100-vh 类
第 2 步: 在 body 标记的末尾添加以下代码片段 -
最终结果::
<html lang="zh-cn"><头><title>引导程序示例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><身体><div><div class="row m-auto"><div class="col-md-12 p-0"><div><nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">带文本的导航栏</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="navbarText"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a><li class="nav-item"><a class="nav-link" href="#">特征</a><li class="nav-item"><a class="nav-link" href="#">价钱</a><span class="navbar-text">带有内联元素的导航栏文本</span></nav>
<div class="container-fluid"><div class="row"><div class="col-md-4 bg-warning"><div><div class="row m-1"><div class="col-md-11">聊天
<div class="col-md-1"><i class="fas fa-plus-circle"></i>
<div class="row mb-2"><div class="col-md-12"><form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}><input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search"/><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button></表单>
<div class="row"><div class="col-md-12"><div class="list-group"><div><a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">列出组项目标题</h5><small>3 天前</small>
<div class="row"><div class="col-md-11">Donec id elit non mi porta...
<div class="col-md-1"><span class="徽章徽章-主要徽章-药丸文本-权利">5</span>
</a>
<div class="col-md-8 bg-primary"><div><div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"><div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"><div class="row"><!-- 它应该是全宽，但不幸的是，由于此部分就在此处出现了滚动条... --><div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"><img src="..." class="image-head-chat" alt="响应式图片"/>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">文本
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">图标
<div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">新闻报
<div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">英加贝<div class="row">形式
<脚本>navHeight = document.querySelectorAll('.navbar-expand-lg')[0].clientHeight;document.querySelectorAll('.container-fluid>.row>div')[0].style.height = `calc(100vh - ${navHeight}px)`;document.querySelectorAll('.container-fluid>.row>div')[1].style.height = `calc(100vh - ${navHeight}px)`;</html>
I would like the orange and blue area to go to the end of the screen or have the full size of the screen minus the height of the navbar. As soon as I use vh-100 it has the full height but it creates a vertical scrollbar which I don't want. So I want the full height of the screen or total height without a scrollbar. How do I do that? Is there anything in Bootstrap like vh-100 - height of the navbar so that everything fits (but there is no 'real' height of the navbar. So I didn't defined the height of the navbar)? Or how can I say that it should take the full height without creating a vertical scrollbar?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row m-auto">
<div class="col-md-12 p-0">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-warning vh-100"> <!-- vh-100 -->
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary vh-100"> <!-- vh-100 -->
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
Nachrichten
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
Eingabe
<div class="row">
Form
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I read this
解决方案
Do the following -
STEP 1: Remove all 100-vh class from the code
STEP 2: Add the following code snippet at the end of the body tag -
<script>
navHeight = document.querySelectorAll('.navbar-expand-lg')[0]
.clientHeight;
document.querySelectorAll('.container-fluid>.row>div')[0].style.height = `calc(100vh - ${navHeight}px)`;
document.querySelectorAll('.container-fluid>.row>div')[1].style.height = `calc(100vh - ${navHeight}px)`;
</script>
FINAL RESULT::
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row m-auto">
<div class="col-md-12 p-0">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-warning">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
Nachrichten
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
Eingabe
<div class="row">
Form
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
navHeight = document.querySelectorAll('.navbar-expand-lg')[0]
.clientHeight;
document.querySelectorAll('.container-fluid>.row>div')[0].style.height = `calc(100vh - ${navHeight}px)`;
document.querySelectorAll('.container-fluid>.row>div')[1].style.height = `calc(100vh - ${navHeight}px)`;
</script>
</body>
</html>
这篇关于如何在没有垂直滚动的情况下指定屏幕的全高?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
