个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
这是一个困扰我一年的问题。根本问题是如何设置元素相对于其父元素的大小，以便它从每条边插入 N 个像素？设置宽度会很好，但您不知道父级的宽度，并且您希望元素随窗口调整大小。 (您不想使用百分比，因为您需要特定数量的像素。)
编辑我还需要防止内容(或缺少内容)拉伸(stretch)或收缩这两个元素。我得到的第一个答案是在父级上使用填充，这会很好用。我希望父级恰好是 25% 宽，并且与浏览器客户区的高度完全相同，而子级不能插入它并获得滚动条。/编辑
我尝试使用 {top:Npx;left:Npx;bottom:Npx;right:Npx;} 解决这个问题，但它只适用于某些浏览器。
我可能会用 jquery 编写一些 javascript 以在每次调整页面大小时修复所有元素，但我对该解决方案并不满意。 (如果我想让顶部偏移 10px 但底部只偏移 5px 怎么办？这会变得很复杂。)
我想知道的是如何以跨浏览器的方式解决这个问题，或者一些允许简单 CSS 解决方案的浏览器列表。也许有人有办法让这一切变得简单。
最佳答案
The CSS Box model可能会为您提供见解，但我的猜测是您无法仅使用 CSS 实现像素完美的布局。
如果我没理解错的话，您希望父级的宽度为浏览器显示区域的 25%，高度恰好为浏览器显示区域的高度。然后，您希望 child 的宽度为 25% - 2n 像素，高度为 100%-2n 像素， child 周围有 n 像素。当前的 CSS 规范不支持这些类型的计算(尽管 IE5、IE6 和 IE7 在 IE8 标准模式下对 CSS 表达式有非标准的 support for CSS expressions 和 IE8 is dropping support)。
您可以强制父级为 100% 的浏览器区域和 25% 的宽度，但是您不能将子级的高度拉伸(stretch)到像素完美...
<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>
...但是会出现水平滚动条。此外，如果内容被挤压，父背景不会超过 100%。这可能是您在问题本身中提供的填充示例。
您可以通过图像和额外的 div 实现您正在寻找的错觉，但我不相信仅靠 CSS 可以实现像素完美并满足该高度要求。
关于css - 求 CSS 浏览器兼容性信息，使用 left 和 right 设置宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/128241/
25
4
0
IE 似乎在来自未压缩的 raphaeljs 1.4.7 的以下第 2207 行(当然，在我的代码的上下文中): gs.left != (t = left + "px") && (gs.left =
这是在操纵 $("#mydiv").position().left 还是 $("#mydiv").offset().left？ $("#mydiv").animate({"left":"-100"},
这个问题在这里已经有了答案: why left+(right-left)/2 will not overflow? (7 个答案) 关闭 1 年前。 在二分搜索 while 循环中: left, r
这个问题在这里已经有了答案: why left+(right-left)/2 will not overflow? (7 个答案) 关闭 1 年前。 在二分搜索 while 循环中: left, r
我有一个 Segment 类和一个这样的段数组: private static class Segment { int number, type; Segment(in
我有一个查询，它在子选择上执行 LEFT JOIN。此查询在高负载环境中运行，并在设定的要求内执行。查询(高度简化)如下所示: SELECT table_A.pKey , table_A.uKey
我在 SO 中看到一些创建 multilanguage websites in JavaScript 的好建议包括 this article on JavaScript internationaliz
我已经使用它年了，所以是时候全面了解它了。假设这样的查询: SELECT * FROM a LEFT JOIN b ON foo... LEFT JOIN c ON bar... document
我正在尝试对搜索框执行以下 MySql 查询。我试图返回“专辑”信息(标题等)，同时包含该专辑中第一张图片的缩略图。但是，我必须查找两个表才能获取图像信息。首先，photos_albums包含该相册中
我有 2 个表，我想 LEFT JOIN 并过滤 LEFT 表上的结果。这些表是: -product_table，包含列 id 和 product_name -order_table，包含列 id、p
我理解 Left Join 应该做什么吗？ 我有一个问题。将其称为查询 A。它返回 19 条记录。 我有另一个查询，查询 B。它返回 1,400 条记录。 我将查询 B 作为左连接插入到查询 A 中，
我正在使用 left: auto;希望重写left: 0;但它不起作用(请参阅 jsfiddle )-我想要 居中对齐。 HTML:
为什么这不起作用？我已经分配了一堆带有 float:left 的 div，并希望设置第一个元素的位置，然后用它更新所有 sibling 的位置。 例如，我将第一个元素的 css 设置为 left:50
这应该是非常基本的 CSS，但无论我尝试什么，该死的 div 就是不会去它应该去的地方! 这是 HTML: Registe-se Nome:
我在一个 div 中嵌套了一个 div。我正在尝试显示一些文本并且有效。然而，我想要的是文本居中对齐，即它有一个 left: -50%。但它什么都不做。但是当我执行类似 left: 20px 的操作时
我有一个包含跟踪数据的表格。在其他值中，该表具有列 traffic_medium、traffic_source 和 traffic_campaign。这些列有时确实包含 (none) 或 null 作
我正在尝试 中的代码。 在 GHC 版本 6.10.4 上: data ParseState = ParseState { string :: String } deriving (Show) n
我在使用用于显示自定义配置文件字段和任何(可选)对应值的 SQL 查询时遇到问题。 这是我正在使用的 SQL 查询: SELECT pf.`id`, pf.`name`, pv.`value` FRO
我目前制作了一个包含侧边栏和内容的容器，但是当我向侧边栏添加的文本多于向容器添加的文本时，第二个侧边栏会稍微 float 到一边。这些是我正在使用的代码。 HTML: Pl
这个问题在这里已经有了答案: Difference between margin and padding? (25 个答案) 关闭 5 年前。
我是一名优秀的程序员,十分优秀！