登录
当前位置： 首页 > 知识库问答 >
问题：

可滚动框中不可访问的内容

丌官绍元
2023-03-14

我正在创建一个带有bootstrap和jquery的登录屏幕，其中必须集中访问卡。

问题是，当垂直滚动条出现时，滚动到顶部并不能显示所有内容，facebook的按钮也无法访问（取决于高度，谷歌的也是）。

为了补偿导航栏的高度，我在主体和父div上测试了padding-top，但没有成功。

我还试着在卡片前添加一个带有clearfix的br，但没有效果。

null

@charset "UTF-8";

html, body
{
  height: 100%;
  width: 100%;
}

body
{
  overflow: hidden;
  padding-top: 3.5rem;
}

.btn-with-icon
{
  position: relative;
}
.btn-with-icon > div
{
  background-color: #FFF;
  border-radius: 0.15rem;
  height: 1.9rem;
  left: 0.17rem;
  position: absolute;
  top: 0.17rem;
  width: 1.9rem;
}
.btn-with-icon > div > i
{
  height: 1.9rem !important;
  width: 1.9rem !important;;
}
.btn-with-icon > div > i::before
{
  font-size: 1.5rem;
  line-height: 1.9rem !important;
}
.btn-with-icon > div > .fa-facebook::before
{
  color: #3B5998;
}
.btn-with-icon > div > .fa-google::before
{
  color: #DB4437;
}
.btn-with-icon > span
{
  margin-left: 2rem;
}

.input-with-icon > i::before
{
  color: #C0C0C0;
  font-size: 1rem;
}
.input-with-icon > i
{
  font-size: 1.8rem;
  position: absolute;
  z-index: 1;
}
.input-with-icon > .form-control
{
  padding-left: 2rem;
}

.separator
{
  color: #C0C0C0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.horizontal-rule
{
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}
.horizontal-rule::before,
.horizontal-rule::after
{
  background: #C0C0C0;
  content: '';
  flex: 1;
  width: 1px;
}
.horizontal-rule::before
{
  margin-bottom: 0.5em;
}
.horizontal-rule::after
{
  margin-top: 0.5em;
}

.vertical-rule
{
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
}
.vertical-rule::before,
.vertical-rule::after
{
  background: #C0C0C0;
  content: '';
  flex: 1;
  height: 1px;
}
.vertical-rule::before
{
  margin-right: 0.5em;
}
.vertical-rule::after
{
  margin-left: 0.5em;
}

.small-text,
.small-text *
{
  font-size: 0.8rem;
  font-weight: 400;
}
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>test</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body class="container-fluid">
    <div class="row h-100">
      <nav class="navbar navbar-dark bg-dark fixed-top">
        <span class="navbar-brand mb-0 h1">navbar</span>
      </nav>
      <div class="col-12 h-100 d-flex justify-content-center align-items-center overflow-auto">
        <div class="card">
          <div class="card-body">
            <form method="post" action="#">
              <div class="form-row">
                <div class="form-group col-12">
                  <button type="button" class="btn btn-secondary btn-block text-left btn-with-icon">
                    <div>
                      <i class="fa fa-facebook fa-fw"></i>
                    </div>
                    <span>Login with Facebook</span>
                  </button>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12">
                  <button type="button" class="btn btn-secondary btn-block text-left btn-with-icon">
                    <div>
                      <i class="fa fa-google fa-fw"></i>
                    </div>
                    <span>Login with Google</span>
                  </button>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12 separator">
                  <span class="vertical-rule">OR</span>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12 input-with-icon">
                  <i class="fa fa-at fa-fw"></i>
                  <input type="email" placeholder="e-mail" class="form-control">
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12 input-with-icon">
                  <i class="fa fa-lock fa-fw"></i>
                  <input type="password" placeholder="password" class="form-control">
                  <a href="#" class="float-right small-text">Forgotten password</a>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12">
                  <button type="submit" class="btn btn-success btn-block">
                    <span class="fa fa-check"></span>
                  </button>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12 text-center small-text">
                  <a href="#">Sign in</a>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-6 mb-0 small-text">
                  <a href="#" target="_blank">Terms</a>
                </div>
                <div class="form-group col-6 mb-0 text-right small-text">
                  <a href="#" target="_blank">Privacy policy</a>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

null

共有2个答案

江新
2023-03-14

现在，我添加了一个新的类来防止卡片扩展到很多，设置了max-height，HTMl中的类和新的CSS用注释标记。 我将尝试进一步调查这一点，并找出确切的原因，这发生了，但你可以尝试这一点，看看它是否修复了您的网页上的问题。 在片断中是这样的。

null

@charset "UTF-8";

html, body
{
  height: 100%;
  width: 100%;
}

body
{
  overflow: hidden;
  padding-top: 3.5rem;
}

.btn-with-icon
{
  position: relative;
}
.btn-with-icon > div
{
  background-color: #FFF;
  border-radius: 0.15rem;
  height: 1.9rem;
  left: 0.17rem;
  position: absolute;
  top: 0.17rem;
  width: 1.9rem;
}
.btn-with-icon > div > i
{
  height: 1.9rem !important;
  width: 1.9rem !important;;
}
.btn-with-icon > div > i::before
{
  font-size: 1.5rem;
  line-height: 1.9rem !important;
}
.btn-with-icon > div > .fa-facebook::before
{
  color: #3B5998;
}
.btn-with-icon > div > .fa-google::before
{
  color: #DB4437;
}
.btn-with-icon > span
{
  margin-left: 2rem;
}

.input-with-icon > i::before
{
  color: #C0C0C0;
  font-size: 1rem;
}
.input-with-icon > i
{
  font-size: 1.8rem;
  position: absolute;
  z-index: 1;
}
.input-with-icon > .form-control
{
  padding-left: 2rem;
}

.separator
{
  color: #C0C0C0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.horizontal-rule
{
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}
.horizontal-rule::before,
.horizontal-rule::after
{
  background: #C0C0C0;
  content: '';
  flex: 1;
  width: 1px;
}
.horizontal-rule::before
{
  margin-bottom: 0.5em;
}
.horizontal-rule::after
{
  margin-top: 0.5em;
}

.vertical-rule
{
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
}
.vertical-rule::before,
.vertical-rule::after
{
  background: #C0C0C0;
  content: '';
  flex: 1;
  height: 1px;
}
.vertical-rule::before
{
  margin-right: 0.5em;
}
.vertical-rule::after
{
  margin-left: 0.5em;
}

.small-text,
.small-text *
{
  font-size: 0.8rem;
  font-weight: 400;
}
/*This is the new CSS*/
.display-area{
  max-height: 80%;
}
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>test</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body class="container-fluid">
    <div class="row h-100">
      <nav class="navbar navbar-dark bg-dark fixed-top">
        <span class="navbar-brand mb-0 h1">navbar</span>
      </nav>
      <div class="col-12 h-100 d-flex justify-content-center align-items-center overflow-auto">
      <!-- added a new class here -->
        <div class="card display-area">
          <div class="card-body">
            <form method="post" action="#">
              <div class="form-row">
                <div class="form-group col-12">
                  <button type="button" class="btn btn-secondary btn-block text-left btn-with-icon">
                    <div>
                      <i class="fa fa-facebook fa-fw"></i>
                    </div>
                    <span>Login with Facebook</span>
                  </button>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12">
                  <button type="button" class="btn btn-secondary btn-block text-left btn-with-icon">
                    <div>
                      <i class="fa fa-google fa-fw"></i>
                    </div>
                    <span>Login with Google</span>
                  </button>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12 separator">
                  <span class="vertical-rule">OR</span>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12 input-with-icon">
                  <i class="fa fa-at fa-fw"></i>
                  <input type="email" placeholder="e-mail" class="form-control">
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12 input-with-icon">
                  <i class="fa fa-lock fa-fw"></i>
                  <input type="password" placeholder="password" class="form-control">
                  <a href="#" class="float-right small-text">Forgotten password</a>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12">
                  <button type="submit" class="btn btn-success btn-block">
                    <span class="fa fa-check"></span>
                  </button>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12 text-center small-text">
                  <a href="#">Sign in</a>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-6 mb-0 small-text">
                  <a href="#" target="_blank">Terms</a>
                </div>
                <div class="form-group col-6 mb-0 text-right small-text">
                  <a href="#" target="_blank">Privacy policy</a>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>
颛孙晗昱
2023-03-14

我从包含div中删除了align-items-center，并将m-auto添加到卡片中。

null

@charset "UTF-8";

html, body
{
  height: 100%;
  width: 100%;
}

body
{
  overflow: hidden;
  padding-top: 3.5rem;
}

.btn-with-icon
{
  position: relative;
}
.btn-with-icon > div
{
  background-color: #FFF;
  border-radius: 0.15rem;
  height: 1.9rem;
  left: 0.17rem;
  position: absolute;
  top: 0.17rem;
  width: 1.9rem;
}
.btn-with-icon > div > i
{
  height: 1.9rem !important;
  width: 1.9rem !important;;
}
.btn-with-icon > div > i::before
{
  font-size: 1.5rem;
  line-height: 1.9rem !important;
}
.btn-with-icon > div > .fa-facebook::before
{
  color: #3B5998;
}
.btn-with-icon > div > .fa-google::before
{
  color: #DB4437;
}
.btn-with-icon > span
{
  margin-left: 2rem;
}

.input-with-icon > i::before
{
  color: #C0C0C0;
  font-size: 1rem;
}
.input-with-icon > i
{
  font-size: 1.8rem;
  position: absolute;
  z-index: 1;
}
.input-with-icon > .form-control
{
  padding-left: 2rem;
}

.separator
{
  color: #C0C0C0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.horizontal-rule
{
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}
.horizontal-rule::before,
.horizontal-rule::after
{
  background: #C0C0C0;
  content: '';
  flex: 1;
  width: 1px;
}
.horizontal-rule::before
{
  margin-bottom: 0.5em;
}
.horizontal-rule::after
{
  margin-top: 0.5em;
}

.vertical-rule
{
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
}
.vertical-rule::before,
.vertical-rule::after
{
  background: #C0C0C0;
  content: '';
  flex: 1;
  height: 1px;
}
.vertical-rule::before
{
  margin-right: 0.5em;
}
.vertical-rule::after
{
  margin-left: 0.5em;
}

.small-text,
.small-text *
{
  font-size: 0.8rem;
  font-weight: 400;
}
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>test</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body class="container-fluid">
    <div class="row h-100">
      <nav class="navbar navbar-dark bg-dark fixed-top">
        <span class="navbar-brand mb-0 h1">navbar</span>
      </nav>
      <div class="col-12 h-100 d-flex justify-content-center overflow-auto">
        <div class="card m-auto">
          <div class="card-body">
            <form method="post" action="#">
              <div class="form-row">
                <div class="form-group col-12">
                  <button type="button" class="btn btn-secondary btn-block text-left btn-with-icon">
                    <div>
                      <i class="fa fa-facebook fa-fw"></i>
                    </div>
                    <span>Login with Facebook</span>
                  </button>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12">
                  <button type="button" class="btn btn-secondary btn-block text-left btn-with-icon">
                    <div>
                      <i class="fa fa-google fa-fw"></i>
                    </div>
                    <span>Login with Google</span>
                  </button>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12 separator">
                  <span class="vertical-rule">OR</span>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12 input-with-icon">
                  <i class="fa fa-at fa-fw"></i>
                  <input type="email" placeholder="e-mail" class="form-control">
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12 input-with-icon">
                  <i class="fa fa-lock fa-fw"></i>
                  <input type="password" placeholder="password" class="form-control">
                  <a href="#" class="float-right small-text">Forgotten password</a>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12">
                  <button type="submit" class="btn btn-success btn-block">
                    <span class="fa fa-check"></span>
                  </button>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-12 text-center small-text">
                  <a href="#">Sign in</a>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-6 mb-0 small-text">
                  <a href="#" target="_blank">Terms</a>
                </div>
                <div class="form-group col-6 mb-0 text-right small-text">
                  <a href="#" target="_blank">Privacy policy</a>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>
 类似资料：
  • JScrollPane滚动条不可滚动

    我有一个类可以画一些非常简单的图形，比如直线、圆和矩形。线条可以动态扩展，有时当它们扩展到超出分辨率时，如果没有滚动条，就无法看到。因此，我已经将JScrollPane添加到JFrame中，但不幸的是，尽管已经调用了布局管理器，但滚动条还是无法滚动。 这是我所拥有的：-一个绘制组件（线条、矩形、圆形）的类-一个设置JFrame/JScrollPane的类 这是我的GUI类的摘录代码： 通过上面的代

  • UIScrollView可滚动内容大小不明确

    各位开发人员，我在Interface Builder（Xcode5/iOS 7）中遇到了自动布局的问题。这是非常基本和重要的，所以我认为每个人都应该知道这是如何运作的。如果这是Xcode中的一个bug，那就是一个关键的bug！ 因此，每当我有这样的视图层次结构时，我就会遇到麻烦: UIScrollView有坚实的约束，例如，每边50像素（没有问题）。然后我将顶部空间约束添加到UILabel（没问题

  • 如何滚动以使滚动窗格内容中的节点可见？

    给定一个带有一些子节点的巨大的是的内容，我如何滚动以使当前视口之外的子节点之一可见？

  • 可滚动的JPanel

    问题内容： 如何使JPanel可滚动？我实现了可滚动界面，但在将其添加到包含面板时 什么都行不通 码： 问题答案： 您必须使用。然后致电； 您不必实现可滚动的，JPanel已经可以滚动

  • JavaFX WebView:Java不可访问

    我试图加载一个网页到我的应用程序。我可以让页面加载，然而，我试图加载的网站需要Java运行，WebView似乎无法在我的MacBook上找到它。见下面我的剥离代码： 现在我的问题是：这有解决办法吗？非常感谢您的帮助：）

  • 制作可滚动的表格并插入表格内边框

    我该怎么办？ 给定下面的html编码，我如何1.）锁定第一行（表头）不滚动和2.）有一个1px固体#ccccc的内表边框 谢谢你的帮助！ 杰伊 样式编码： 正文：

  • 当滚动超过最初可见的内容时，无法访问回收器视图中的textviews

    我在这里算是个新手。我正在尝试使用recyclerview来显示SQlite表中的项。我需要它做的是，当一个项目被单击时，一个上下文菜单显示，要求采取三个操作之一。其中一项要求我从所选位置的一个textviews中获取数据。当我单击一个最初可查看的项目时，它工作得很好，但是，如果我向下滚动到一个最初不可查看的项目，它会在试图访问TextView的地方崩溃。以下是错误： 尝试对空对象引用调用虚拟方法

  • 如何使用CSS放置固定高度可变的标题和可滚动的内容框？

    问题内容： 我正在尝试制作一个带有固定标题和可滚动内容区域的网页。当集管具有已知高度时，这是微不足道的，但是我正在努力寻找集管处于流动状态的解决方案。 我想要的布局是： 其中“头”是其内容所需的高度，“内容”没有最小高度，但在变为可滚动状态之前将达到视口底部的最大高度。 这些天来使用纯CSS可能吗？我的目标是IE8 +。 问题答案： 假设您所说的“固定” ，我认为在纯CSS中是不可能的，因为该元素

相关问答

当滚动超过最初可见的内容时，无法访问回收器视图中的textviews如何拥有不可见的可滚动布局ScrollView具有不明确的可滚动内容高度[重复]Hadoop jobtracker UI不可访问CSS页眉和页脚，可滚动内容

相关文章

添加可滚动的JTextArea（Java）隐藏滚动条，但仍可以滚动通过反射访问不可见的类Java类可访问性如何拥有可滚动的JTextPane？

相关阅读

2.4.1 ScrollView(滚动条)Bootstrap 滚动监听Bootstrap4 滚动监听Day 4. 每日一问 --- 实习中收获的可复用经验美团一面，前端问的可真多啊🤯

相关工具

滚动菜单滚动数字Label双向滚动scrollview可展开的UITableViewCell循环滚动视图

相关文档

可爱的 PythonWindows 访问控制Windows 访问控制 帮助文档鲜活的数据数据可视化指南网络访问保护 NAP 客户端配置
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.