height 相关问题

如何在javascript中获取鼠标相对于窗口视口的位置？

event.pageY 获取相对于整个文档高度的鼠标位置（我假设是 document.documentElement.offsetHeight）。 但是如何获取鼠标相对于当前视口的位置，wh...

Div 滚动使 padding-bottom 消失

我有一个具有以下结构的网站： 成分 我有一个具有以下结构的网站： <div class="main-outer"> <div class="main-inner"> <div class="test"> components </div> </div> </div> div 'test' 调用不同的组件。 我正在尝试使其高度响应，这样如果组件具有“高度：100％”，它应该随着屏幕的增长而增长。 但是，如果我在组件中设置最小高度，则滚动（来自 main-outer div）应该从该高度出现。 我的问题是：当屏幕达到该最小高度时，我在'主内部类'中设置的填充底部（或边距）消失......我该如何解决这个问题？ 我这里有一个例子： https://jsfiddle.net/4o1j2zmn/1/ 编辑：我需要比“测试”的div更高的边距，因为当我调用许多组件时，我想让边距成为全局的 我检查了你的代码，我认为“.main-outer”填充工作正常。这是“.main-inner”边距和“.test”类的固定高度的问题。我已将您的边距属性从“.main-inner”转移到“.test”类，并将“.test”高度设置为自动，以便它将根据内容进行调整，并显示距父容器外边缘的边距。请检查并尝试以下代码片段： .main-outer { padding: 0 50px; height:100vh; overflow-y: auto; overflow-x: hidden; background-color: blue; } .main-inner { height: 100%; box-sizing: border-box; } .test{ display: block; content: ''; height: auto; background-color: red; margin: 50px 0 50px 0; } <div class="main-outer"> <div class="main-inner"> <div class="test"> http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ </div> </div> </div> 对于任何在未来遇到这个问题的人来说，对我有用的修复方法是删除显式的 .main-inner 的 height: 100%;。 注意：min-height: 100%;似乎也会导致同样的问题。 .main-outer { padding: 0 50px; height:100vh; overflow-y: auto; overflow-x: hidden; background-color: blue; } .main-inner { /* height: 100%; */ box-sizing: border-box; } .test{ display: block; content: ''; height: auto; background-color: red; margin: 50px 0 50px 0; } <div class="main-outer"> <div class="main-inner"> <div class="test"> http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ </div> </div> </div>

CSS-P 噩梦

我有一个容器DIV位置：相对。把所有东西都装在里面 然后一左一右一栏，古典布局。 它们都绝对定位在这个相对#Main 中。 我想要...

设置控制台宽度（Windows、Python）

我正在使用Python开发一个基于文本的小型控制台游戏。因为我使用了一些 ASCII 艺术，所以我必须确保游戏启动后每个人的控制台宽度都相同。可以

带有 XIB 的动态高度单元：包括 UILabel 和 UIImageView

我正在尝试使用 XIB 设计一个具有以下布局和行为的 UITableViewCell： 左侧的 UIView，固定大小为 44x44。 旁边有一个 UILabel，可根据...

Flutter 更改 AppBar 内 OutlineButton 的高度？

只是想知道如何更改 OutlineButton 的高度？我想这也可能适用于其他按钮类型。 返回脚手架（ 应用栏：应用栏（ 标题：文本（'测试'）， 一个...

如何在 UITableView 中创建带有标题和描述的动态高度表头？

我有一个 UITableView，我想在表格顶部显示动态标题。 我正在尝试使用 tableHeaderView 来做到这一点。标题包含一个 titleLabel 和一个 descriptionLabel 排列...

Get.height 和 Get.width 在发布模式下第一次打印 0.0？

我正在为我的项目使用 Getx 状态管理。当使用 setState((){}) 刷新屏幕后第一次构建小部件时，Get.width 和 Get.height 打印 0.0，它打印实际的

bootstrap 5.2.0行/列的高度拉伸到页面底部

我正在努力拉伸左侧导航部分以到达页面底部并保持响应。我正在使用 Bootstrap 5.2.0。我尝试了很多解决方案，例如 h-100、flex-grow、min-vh-100m self-...

如何在 Rust Slint 项目中设置窗口位置和 z-index？

我正在尝试使用 Rust Slint GUI 项目。 但我不知道如何设置窗口级别始终高于其他窗口。（如 z-index: 10000） 另外，如果运行它，应该显示在计算机的右侧...

如何增长一个div来填充其他两个div之间的空间？

我在页面顶部有一个 div (#top)，并在页面底部设置了一个具有绝对位置的 div (#bottom)。我在中间有一个 div (#middle) 和一个内部组件 (#middle-inner)。我愿意

即使宽度和高度设置为 100%，对话框元素也不会调整为全屏或整个屏幕

在编写项目代码的过程中，我决定将自己创建的弹出窗口更改为对话框标签。但后来我遇到了一个问题，即使...

如何修复移动Safari中的vh（视口单位）CSS？

我在我的一个项目中使用了 vh（视口单位）CSS，但在移动 Safari 中它不起作用。 Safari 似乎不知道如何处理 vh，但它在其他浏览器中工作正常。我想要...

HTML <object>适合其内容的高度

我正在尝试使用在宽度为800px的内容div内显示phpbb论坛；最小高度：525px；。 正常内容的div是res...

如果内容超出右 Div 的高度，左 Div 应该滚动

我有一个布局，其中两个 div（左和右）使用 Flexbox 并排。我想要以下行为： 右侧的 div 应根据容器的内容确定容器的高度。 ...

如何获取底部导航栏内容的继承大小以动态调整底部导航的大小？

我想通过使用其内容（子项）的首选和/或继承高度来影响其高度来调整 BottomAppBar 的大小。 我需要这样做以减少代码重复并可能使其...

无法弄清楚为什么元素的高度不是我设置的值

由于某种原因，我的元素的高度从 288px 削减到 212.975px（即使我使用 !important 时也是如此），我不知道为什么以及问题出在哪里。为什么会切到这个值以及如何修复...

使用 Framer Motion 动画高度在 React 中不起作用

所以，我一直在尝试在我的 React 项目中使用 Framer Motion。我基本上想在 div 渲染时将高度从 0 动画到“自动”。 我尝试了下面的代码，但是heig...

如何减小SWT中组合框的默认大小（项目的高度）？

我用swt创建的组合框的大小是固定的（项目的高度不能改变）。有什么办法可以改变这个默认高度吗？即使我尝试减小我的字体大小...

是否有任何因素会导致具有“min-height”属性的元素出现异常行为？

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chat&Book</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="lang"> <select class="srclang"> <option value="en">English</option> <option value="ta">Tamil</option> <option value="hi">Hindi</option> </select> <select class="trglang"> <option value="hi">Hindi</option> <option value="en">English</option> <option value="ta">Tamil</option> </select> </div> <div class="msgarea"></div> <div class="typebar"> <input type="text" name="message" placeholder="Message.." class="msgbox" required> <button class="sendbtn">Send</button> </div> <script src="/chat.js"></script> </body> </html> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { width: 100vw; height: 100vh; background-color: #E9EFEC; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px; font-family: 'Nunito Sans', sans-serif; } .msgarea { width: 100%; height: 85vh; border-radius: 10px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; /* Align messages from the top */ gap: 10px; background-color: white; padding: 10px; overflow-y: auto; /* Enable scrolling */ } .msgarea p { max-width: 80%; display: block; /* Change this */ min-height: 40px; /* Keep this */ background-color: #478CCF; padding: 10px; border-radius: 10px; color: white; margin-bottom: 10px; margin-top: 10px; word-wrap: break-word; box-sizing: border-box; overflow-wrap: break-word; /* Ensure long words wrap */ } .lang { position: fixed; top: 20px; left: 20px; } .typebar { width: 100vw; height: 10vh; background-color: #E9EFEC; display: flex; justify-content: flex-start; align-items: center; gap: 5%; position: fixed; bottom: 0; } .msgbox { width: 80%; height: 80%; margin-left: 20px; border-radius: 25px; border: 1px solid black; background: white; padding-left: 15px; box-sizing: border-box; font-family: 'Nunito Sans', sans-serif; position: relative; font-size: 16px; } .sendbtn { border: 1px solid black; background-color: #478CCF; color: white; width: 10%; height: 80%; border-radius: 25px; margin-right: 20px; cursor: pointer; font-size: 16px; } @media (max-width:700px) { .msgarea { height: 80vh; border: 2px solid #478CCF; } .msgarea p{ min-height: 40px; margin-top: 20px; } .msgbox { width: 70%; height: 70%; } .sendbtn { width: 30%; height: 70%; } } 这里我将“msgarea p”的高度设置为最小值 40px。如果“msgarea”内的消息很少，则效果很好。我还向“msgarea”添加了溢出属性，以确保一旦消息超出，它就可以滚动。它也工作得很好。但问题在于“msgarea p”高度，尤其是当消息超出并且变得可滚动时。一旦“msgarea”变得可滚动，min-height 属性就会出现错误，“p”标签中的文本就会溢出背景颜色。这就是我面临的问题。 我尝试将 p 标签的高度更改为自动，但没有任何反应。 尝试删除最小高度，以便文本可以覆盖整个背景颜色并且不会溢出