height 相关问题

确定Y轴上对象大小的属性。请不要使用此标记，它在您的帖子中没有分类值。

为什么不在html/css中的高度工作百分比？我正在尝试将CSS设置为一定百分比的高度，但它的大小与其中的内容相同。但是，当我删除

<div>时，它有效； <!DOCTYTPE html>根据需要占用整个页面。我希望该页面验证，所以我该怎么办？我在<div>上有此CSS，它的ID为<div>：page 我试图将CSS的DIV设置为一定百分比的高度百分比是什么？要设置一个百分比，其父元素（*）必须具有明确的高度。这是相当不言而喻的，因为如果您离开身高为#page { padding: 10px; background-color: white; height: 90% !important; } ，则该块将达到其内容的高度...但是，如果内容本身的高度以您所做的父母百分比表示您自己有点捕获22。浏览器放弃了，只使用内容高度。 div的父母必须具有显式auto属性。虽然如果您愿意，那个高度也可能是一个百分比，但这只会将问题提升到一个新的水平。如果您想使DIV高度占视口高度的百分比，那么DIV的每个祖先（包括height和<html>）都必须具有<body> Div. （*：或者，如果DIV位置为“包含块”，这是最接近的祖先。）在线，所有现代浏览器和IE> = 9支持新的CSS单元相对于视口高（height: 100%）和视口宽度（vh）： vw 在这里看到moreinfo.。您还需要设置div { height:100vh; } 和<html>元素的高度；否则，它们只会足够大以适合内容。例如：： <body> bobince的回答会让您知道哪些情况“高度：xx％”；会或不起作用。如果您想创建具有设定比率的元素（高度：其宽度的％），请使用<!DOCTYPE html> <title>Example of 100% width and height</title> <style> html, body { height: 100%; margin: 0; } div { height: 100%; width: 100%; background: red; } </style> <div></div>属性。确保在元素上没有明确设置高度以使其工作。 https：//developer.mozilla.org/en-us/docs/web/css/aspect-ratio aspect-ratio 历史上，最好的方法是使用.square { width: 100%; height: unset; aspect-ratio: 1 / 1; } 设置高度。正方形的示例： padding-bottom 正方形容器将仅由填充制成，内容将扩展以填充容器。 2009年的长篇文章有关此主题：Http：//alistapart.com/article/creating-intrinsic-ratios-for-video 为了使用百分比（％），您必须定义其母元素的百分比。如果您使用<div class="square-container"> <div class="square-content">  </div> </div> .square-container { /* any display: block; element */ position: relative; height: 0; padding-bottom: 100%; /* of parent width */ } .square-content { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } ，它将不起作用，因为其父母的身高没有百分比。在这种情况下，为了工作Body高度您必须将其添加到body{height: 100%}中在其他情况下，可以消除可以使用的定义父母百分比 html{height:100%} vh代表视图高度您可以使用body{height:100vh}。 CSS3为我们提供了相关的单位。 100VW表示100％的视口宽度。 100VH; 100％的高度。 100vw / 100vh 有时，您可能需要有条件地设置DIV的高度，例如当整个内容小于屏幕高度时。将所有父元素设置为100％时，当内容的时间长于屏幕尺寸时。，解决这个问题的方法是设置Min Height：让父元素自动调整其高度然后，在您的主div中，从100VH（视口单元）中减去标头和页脚div的像素大小。在CSS中，类似： Min -Height：计算（100VH -246px）; 100VH是屏幕的全长，减去周围的divs。通过设置最小的高度，而不是高度，内容的时间长于屏幕，而不是被切断。具有新的CSS尺寸属性，您可以在父母上设置精确的高度而逃脱。可以这样使用新的 <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh"> <div style="width:70%; height: 100%; border: 2px dashed red"></div> <div style="width:30%; height: 100%; border: 2px dashed red"></div> </div> 和block-size属性： inline-size 在全页模式下重点浏览器窗口。我认为这些值与视口高和宽度有关。有关更多信息，请参考：Https：//www.w3.org/tr/css-sizing-3/ 几乎所有浏览器都支持它：https：//caniuse.com/？search = inline-size pepersentages主要用于宽度，媒体查询，最大和最小宽度，并用于与REM和EM'S。

html css height

回答 7 投票 0

在背景图像上以100VH的身高为中心。我正在参加一门课程，其中固定位置有一个Navbar。背景设置为100VH的高度，并且具有文本内容的DIV为中心。使用Flexbox几乎是

html height viewport centering

回答 2 投票 0

内容 Div 100% 高度减去页脚 Div 的动态高度

我正在使用 Bootstrap 4，并且我有一个非常复杂的页脚： ...动态调整其高度。这是一个PHP应用程序，因此屏幕中央的内容会发生变化。当内容...

css bootstrap-4 height

回答 2 投票 0

使用 CSS 时画布会被拉伸，但使用 `width` 和 `height` 属性时则正常

我有 2 个画布，一个使用 HTML 属性宽度和高度来调整大小，另一个使用 CSS：我有 2 个画布，一个使用 HTML 属性 width 和 height 来调整大小，另一个使用 CSS: <canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas> <canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas> Compteur1 按其应有的方式显示，但 compteur2 不显示。内容是使用 JavaScript 在 300x300 画布上绘制的。为什么会有显示差异？看起来 width 和 height 属性决定了画布坐标系的宽度或高度，而 CSS 属性只决定了显示它的框的大小。这在 HTML 规范中进行了解释： canvas元素有两个属性来控制元素位图的大小：width和height。这些属性在指定时必须具有“有效的非负整数”值。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者解析其值返回错误，则必须使用默认值。 width 属性默认为 300，height 属性默认为 150。要在画布上设置 width 和 height，您可以使用：canvasObject.setAttribute('width', '150'); canvasObject.setAttribute('height', '300'); 对于 <canvas> 元素，width 和 height 的 CSS 规则设置将绘制到页面的画布元素的实际大小。另一方面， width 和 height 的 HTML 属性设置画布 API 将使用的坐标系或“网格”的大小。例如，考虑这个（jsfiddle）： var ctx = document.getElementById('canvas1').getContext('2d'); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 30, 30); var ctx2 = document.getElementById('canvas2').getContext('2d'); ctx2.fillStyle = "red"; ctx2.fillRect(10, 10, 30, 30); canvas { border: 1px solid black; } <canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas> <canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas> 两者都相对于画布元素的内部坐标绘制了相同的东西。但在第二个画布中，红色矩形的宽度将是原来的两倍，因为 CSS 规则将整个画布拉伸到更大的区域。注意：如果未指定 width 和/或 height 的 CSS 规则，则浏览器将使用 HTML 属性来调整元素的大小，以使这些值的 1 个单位等于页面上的 1px。如果未指定这些属性，则它们将默认为 width 为 300 和 height 为 150。如果您在 CSS 中设置宽度和高度，画布将被拉伸。如果你想动态操纵画布的尺寸，你必须使用 JavaScript，如下所示： canvas = document.getElementById('canv'); canvas.setAttribute('width', '438'); canvas.setAttribute('height', '462'); Shannimal修正 var el = $('#mycanvas'); el.attr('width', parseInt(el.css('width'))) el.attr('height', parseInt(el.css('height'))) Canvas 通过缓冲区渲染图像，因此当您指定宽度和高度 HTML 属性时，缓冲区的大小和长度会发生变化，但当您使用 CSS 时，缓冲区的大小不会改变。使图像拉伸。使用 HTML 调整大小。画布大小更改 -> 缓冲区大小更改 -> 渲染使用 CSS 调整大小画布大小已更改 -> 渲染由于缓冲区长度保持不变，当上下文渲染图像时，图像显示在调整大小的画布中（但在未更改的缓冲区中渲染）。 CSS 设置画布元素的宽度和高度，因此它会影响坐标空间，使绘制的所有内容倾斜这是我如何使用 Vanilla JavaScript 设置宽度和高度的方法 canvas.width = numberForWidth canvas.height = numberForHeight var ctx = document.getElementById('canvas1').getContext('2d'); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 30, 30); var ctx2 = document.getElementById('canvas2').getContext('2d'); ctx2.fillStyle = "red"; ctx2.fillRect(10, 10, 30, 30); canvas { border: 1px solid black; } <canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas> <canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas> 如果您想要基于例如的动态行为CSS 媒体查询，不要使用画布宽度和高度属性。使用 CSS 规则，然后在获取画布渲染上下文之前，将 CSS 宽度和高度样式分配给宽度和高度属性： var elem = document.getElementById("mycanvas"); elem.width = elem.style.width; elem.height = elem.style.height; var ctx1 = elem.getContext("2d"); ... 我相信 CSS 有更好的机制来指定画布的大小，并且 CSS 必须决定样式，而不是 JavaScript 或 HTML。话虽如此，在 HTML 中设置宽度和高度对于解决画布问题非常重要。 CSS 具有 !important 规则，允许覆盖属性的其他样式规则，包括 HTML 中的规则。通常，它的使用是不受欢迎的，但这里的使用是合法的hack。在 WebAssembly 的 Rust 模块中，您可以执行以下操作： fn update_buffer(canvas: &HtmlCanvasElement) { canvas.set_width(canvas.client_width() as u32); canvas.set_height(canvas.client_height() as u32); } //.. #[wasm_bindgen(start)] pub fn start() -> Result<(), JsValue> { // ... let canvas: Rc<_> = document .query_selector("canvas") .unwrap() .unwrap() .dyn_into::<HtmlCanvasElement>() .unwrap() .into(); update_buffer(&canvas); // ... // create resizing handler for window { let on_resize = Closure::<dyn FnMut(_)>::new(move |_event: Event| { let canvas = canvas.clone(); // ... update_buffer(&canvas); // ... window.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref())?; on_resize.forget(); } } 一旦加载 WASM 模块，然后每当调整窗口大小时，我们就会更新画布缓冲区。我们通过手动将画布的 width 和 height 指定为 clientWidth 和 clientHeight 的值来完成此操作。也许有更好的方法来更新缓冲区，但我相信这个解决方案比 @SamB、@CoderNaveed、@Anthony Gedeon、@Bluerain、@Ben Jackson、@Manolo、@XaviGuardia、@Russel Harkins 和 @fermar 建议的解决方案更好因为该元素由 CSS 设计样式，而不是 HTML。与 @Manolo 使用的 elem.style.width 和 elem.style.height 技巧或 @XaviGuardia 使用的 JQuery 等效项不同，它将适用于 canvas，其大小通过使用指定为 flex 或 grid 项目。与@Russel Harkings 的解决方案不同，这也可以处理调整大小。虽然我喜欢他的回答，因为它真的很干净、简单。 WASM 是未来！哈哈：D 附注有很多 .unwrap() 因为 Rust 明确地处理了可能的失败。P.P.S. { let on_resize = Closure::<dyn FnMut(_)>::new(move |_event: Event| { let canvas = canvas.clone(); // ... update_buffer(&canvas); // ... window.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref())?; on_resize.forget(); } 使用更好的库可以做得更干净。例如 add_resize_handler(&window, move |e: ResizeEvent| { let canvas = canvas.clone(); // ... update_buffer(&canvas); })

css html canvas height width

回答 10 投票 0

Kivy ScrollViewminimum_height 不再动态地使用 python 中的嵌套布局

目前正在与 Kivy 嵌套的layotus 和 scorll 视图作斗争。我使用一些按钮动态添加或删除表。随着页面的增长，我期望父 CreatePly 布局的 self.minimum_height ...

python kivy scrollview height

回答 1 投票 0

“auto”是 HTML 属性“height”和“width”的有效值吗？

auto 是 HTML 属性 height 和 width 的有效值吗？请提供可靠的来源。我无法找到有信誉的消息来源说是或否（即专门解决这个问题...

html syntax height width

回答 1 投票 0

如何根据文本内容使所有div的高度相同？

我仍然被一个长期存在的问题所困扰。为了简洁起见，我的网站在无序列表中有 3 个列表项。在我的演示中，列表是绿色框。每个列表项都包含一个图像...

html css list height

回答 3 投票 0

Flexbox：如何组合列上的百分比、像素和剩余高度？

我正在构建基本的网格系统，需要结合不同大小单位描述的弹性项目的高度，这些单位是％、px和剩余空间。 html: 我正在构建基本的网格系统，需要结合不同尺寸单位描述的弹性项目的高度，这些单位是％，px和剩余空间。 html: <div class="grid"> <div class="block" style="flex-basis: 50px;">50px</div> <div class="block" style="flex-basis: 25%;">25%</div> <div class="block">stretch to remaining space?</div> <div class="block" style="flex-basis: 50px;">50px</div> </div> CSS： html,body,.grid { height: 100%; padding: 0; margin: 0; } .grid { width: 300px; background: #aaa; display: flex; flex-direction: column; justify-content: flex-start; } .block { outline: solid 1px black; flex-grow: 0; // remove growing proportion flex-shrink: 0; // remove shrinking proportion } 工作示例： http://codepen.io/antraxis/pen/zxwgEo 使用 flex-grow 参数（flex简写属性中的第一个）： * { margin: 0; box-sizing: border-box; } .grid { height: 100dvh; background: #aaa; display: flex; flex-direction: column; } .block { outline: solid 1px black; } .a { flex: 0 0 50px; } .b { flex: 0 0 15%; } .c { flex: 1 0 0; } <div class="grid"> <div class="block a">block height 50px</div> <div class="block b">block height 15%</div> <div class="block c">block height *</div> <div class="block a">block height 50px</div> </div> 代码笔

css height flexbox stretch

回答 1 投票 0

如何获取文字的真实高度？

参考这个例子： $(文档).ready(函数() { var body = $('body'), 文本 = $('#text'); body.append('jQuery'); 乙...

javascript jquery text height

回答 1 投票 0

使用 rowtemplate 更改 datagridview 行高但不起作用

我有一个 DataGridView，其中有两列成员名称和成员图像。我想增加 DataGridView 中每一行的高度。我设置了属性的值，但高度没有改变，任何...

c# winforms datagridview height

回答 3 投票 0

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

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

javascript height dom-events viewport

回答 5 投票 0

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>

html css scroll height padding

回答 2 投票 0

CSS-P 噩梦

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

css height

回答 2 投票 0

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

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

python console height width set

回答 4 投票 0

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

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