CSS 高度动态设置
所以我正在检查这个网站: http://www.grittirollo.it/ 看起来滑出的内容具有固定的高度。有没有办法动态设置这个?
So I'm inspecting this site: http://www.grittirollo.it/ and it appears that the content that slides out has a fixed height. Is there no way to set this dynamically?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
看起来开发人员似乎测量了渲染时滑块盒模型的每个部分的高度,然后将其乘以行数。从那里,他/她在 CSS 中手动设置。
It appears as though the developer measured out how tall each portion of the sliders' box model would be when rendered, and then multiplied it by how many rows there were. From there, he/she set it manually in the CSS.
网页上的元素通常可以使用其scrollHeight JavaScript 属性(element.scrollHeight)进行测量,但某些浏览器没有此功能,并且某些浏览器的做法与其他浏览器不同。 (我相信 Firefox 必须沿着元素树递归地完成,而 Safari 只使用最外面的元素。)这应该可以在不使用 JavaScript 手动设置高度的情况下实现,您可能只需要有条件地对其进行编码与您想要支持的所有浏览器一起使用。
Elements on a webpage can typically be measured with their scrollHeight JavaScript property (element.scrollHeight) however some browsers don't have this and some browsers do it differently from others. (I believe Firefox's has to be done recursively down the tree of elements and Safari just uses the outermost element.) This should be possible without manually setting the height using JavaScript, you just may have to conditionally code it to work with all the browsers you want to support.
我不明白为什么有必要动态设置它。如果内容是
float:left;
并且他们在可隐藏部分的底部放置了,您将能够查看该部分未使用 JavaScript 隐藏时的内容。然后,您可以使用填充和边距调整布局,使其看起来更漂亮。
或者,他们也可以使用
position:relative;
和position:absolute;
来布局可隐藏部分。这取决于偏好。I don't see why it's necessary to set it dynamically. If the stuff is
float:left;
and they put a<div class="clear">
at the bottom of a hide-able section, you would be able to see the contents of that section when it was un-hidden with JavaScript. You could then adjust the layout with padding and margin to make it look pretty.Or, they could have also used
position:relative;
andposition:absolute;
to layout the hide-able sections. It comes down to preference.