7赞

CSS:使一个块元素填充父元素的整个空间？

作者：mobiledu2402851323 | 2023-08-30 17:18

如何解决《CSS:使一个块元素填充父元素的整个空间？》经验，为你挑选了1个好方法。

我试图在一个元素中放置一个链接,并让元素填充整个空间.虽然我可以让它以宽度:100%水平填充,但让它垂直填充会被证明是麻烦的.身高:100%似乎没有效果.

我想这样做,以便用户可以单击单元格中的任何位置来激活链接.我知道我可以在自己上面放一个onClick属性并通过javascript处理它,但我想用"正确"的css方式来做.

澄清:表格的每一行都可以有不同的高度,因为内容是动态的,因此对于或元素使用固定高度的解决方案将不起作用.

以下是一些示例代码:



  
    Link 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor.
  
  
    Link 2
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor.

Link 1	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor.
Link 2	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor.

这是一个完全相同代码的页面

正如您所看到的那样,如果将鼠标悬停在链接上,则元素不会垂直填充,从而产生难看的外观.我可以通过将其置于" th:hover a "样式来修复悬停背景,但是如果单击实际a标记所在的位置,链接仍然只能实际起作用.

1> acromm..：

只是改变这种风格

th {
  font-size: 50%;
  width: 20em;
  height: 100%;
  line-height: 100%; 
}

干杯

幸运的是,这是一个内部工具,我可以使用IE6打击任何人.:)

不幸的是,这个解决方案(包括的高度)只能在IE6/7/8和Opera中的怪癖模式下工作,并且在Safari(和Chrome)中根本不起作用.

重要提示:我只花了一些时间发现当文档上设置了正确的DOCTYPE时,实际显示的答案实际上不起作用.它只适用于怪癖模式.修复很简单:``元素也必须有高度:100%.

推荐阅读

程序员
我相信这是一个与其构造函数抛出的放置new-expression相关的clang中的错误

如何解决《我相信这是一个与其构造函数抛出的放置new-expression相关的clang中的错误》经验，为你挑选了1个好方法。 ... [详细]
程序员
GSON JsonElement.getAsString与JsonElement.toString？

如何解决《GSONJsonElement.getAsString与JsonElement.toString？》经验，为你挑选了1个好方法。 ... [详细]
程序员
为什么jsfiddle给我错误"SyntaxError:Unexpected token:"？

如何解决《为什么jsfiddle给我错误"SyntaxError:Unexpectedtoken:"？》经验，为你挑选了1个好方法。 ... [详细]
程序员
将位图保存到MemoryStream时,GDI +中发生了一般错误

如何解决《将位图保存到MemoryStream时,GDI+中发生了一般错误》经验，为你挑选了1个好方法。 ... [详细]
程序员
远程范围到本地

如何解决《远程范围到本地》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何将矩阵行的元素传递给函数？

如何解决《如何将矩阵行的元素传递给函数？》经验，为你挑选了1个好方法。 ... [详细]
程序员
在Arduino错误时将4个字节转换为long

如何解决《在Arduino错误时将4个字节转换为long》经验，为你挑选了1个好方法。 ... [详细]
程序员
触摸和触摸UIImageView的动作

如何解决《触摸和触摸UIImageView的动作》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何使用带有指向不应释放的struct的指针的shared_ptr

如何解决《如何使用带有指向不应释放的struct的指针的shared_ptr》经验，为你挑选了3个好方法。 ... [详细]
程序员
在Alamofire关闭回归Bool

如何解决《在Alamofire关闭回归Bool》经验，为你挑选了1个好方法。 ... [详细]
程序员
无法更改UILabel上的UIFont大小[Swift]

如何解决《无法更改UILabel上的UIFont大小[Swift]》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何根据按下的频率来映射vim中的键？

如何解决《如何根据按下的频率来映射vim中的键？》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何将库添加到CodeLite项目？

如何解决《如何将库添加到CodeLite项目？》经验，为你挑选了1个好方法。 ... [详细]
程序员
为什么我的图像高度不能正确缩放？

如何解决《为什么我的图像高度不能正确缩放？》经验，为你挑选了1个好方法。 ... [详细]
程序员
从决策树预测的有效算法(使用R)

如何解决《从决策树预测的有效算法(使用R)》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在WebView Android中调整YouTube视频的大小？

如何解决《如何在WebViewAndroid中调整YouTube视频的大小？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Matlab:用向量元素乘以矩阵的行

如何解决《Matlab:用向量元素乘以矩阵的行》经验，为你挑选了1个好方法。 ... [详细]
程序员
当我在python和pyqt中关闭app时,没有运行类析构函数

如何解决《当我在python和pyqt中关闭app时,没有运行类析构函数》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用Java从外部库修改文件

如何解决《使用Java从外部库修改文件》经验，为你挑选了0个好方法。 ... [详细]
程序员
为什么在UI线程上调用启动新任务

如何解决《为什么在UI线程上调用启动新任务》经验，为你挑选了1个好方法。 ... [详细]

mobiledu2402851323

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章