如何使锚点填充其包含 div 的高度

Posted 2023-03-06

【中文标题】如何使锚点填充其包含 div 的高度

【英文标题】：How to make an anchor fill the height of its containing div

【发布时间】：2013-06-02 15:47:35

【问题描述】：

我知道这对你们中的一些人来说真的很基础，但我没有足够的 CSS 知识来实现​​这一点。

我正在尝试制作我自己的微调器版本，它会与 jqueryui 主题挂钩，因此至少最初必须使用它们的类。我还需要使小部件能够动态更改其高度（和宽度）。

我的问题是我不知道如何调整按钮的大小以适应其容器的高度。如果我主动设置.ui-spinner div 的高度，则容器太小而无法容纳文本。如果我不这样做，那么 div 就更大了，所以锚点也需要很大，但我不知道有多大。使用开发人员工具查看它，我没有看到任何边距或填充来解释额外的大小。

我看到How to style an anchor tag to look like a button with the same height as the button? 不断弹出类似的问题，但我已经将样式设置为 inline-block。

这是我目前拥有的。我在http://jsfiddle.net/37za8/做了一个小提琴

html

<div class="ui-corner-all ui-widget ui-widget-content ui-spinner">
    <a class="ui-corner-all ui-widget ui-button ui-button-text-only ui-state-default" tabindex="-1" style="vertical-align: middle; margin: 0; display: inline-block;">
    <span class="ui-icon ui-icon-minusthick"></span>
</a>

    <input class="ui-spinner-input" style="margin: 0;" value="0" />

    <a class="ui-corner-all ui-widget ui-button ui-button-text-only ui-state-default" tabindex="-1" style="vertical-align: middle; margin: 0; display: inline-block;">
        <span class="ui-icon ui-icon-plusthick"></span>
    </a>
</div>

jQuery

var _selector = ".ui-spinner"

$(_selector + " .ui-spinner-input").css("height", "18px");
$(_selector + " a").css("height", "18px");

$(_selector + " .ui-spinner-input").css("width", "52px");
$(_selector + " a").css("width", "24px");
$(_selector + " span").css("margin-left", "4px");

只要结果是可动态调整的，我可以更改您所说的任何有帮助的内容。我相信这对你们大多数人来说很容易。提前致谢！

编辑

为了澄清，我试图最终模仿 jqueryui 微调器。我正在尝试制作一个可以在显示之前设置高度的小部件/组件。 jqueryui 处理它的一个简单示例是this fiddle。我构建的组件有一个 setHeight 函数，它将设置小部件的高度。就是在 jQuery 中设置高度的那两行。必须有某种方法来设置 css（或在必要时添加更多 jquery），以便我可以动态更改高度。

【问题讨论】：

你可以使用不同于 18px 的高度吗？我尝试了 24px，它看起来不错 - jsfiddle.net/37za8/1

哦，你已经回答过了：s

是的。碰巧当我将它设置为 18 时，框最终是 25 像素，所以 24-26 像素应该看起来不错。不过，这依赖于在开发工具中查找高度，然后进行硬编码。

所以你的问题是什么是正确的代码，可以推断出正确的像素数，这样你就不必硬编码了？ CSS怎么样？你能重新定义css吗？

要么推断出正确的像素数，要么简单地让 css 手动完成。我可以改变任何东西，除了从 jqueryui 类开始的约束和高度可以动态调整。

【参考方案1】：

可以计算容器的高度，插入到“a”元素的高度中：

var _selector = ".ui-spinner"

var _inputvar = 25;

$(_selector).css("height", _inputvar);
$(_selector).css("line-height", "1");

console.log($(_selector).height());

$(_selector + " a").css("height", $(_selector).height());

$(_selector + " .ui-spinner-input").css("width", "52px");
$(_selector + " a").css("width", _inputvar);
$(_selector + " span").css(display:"inline-block",position:"static",marginTop:(_inputvar/10)+"px");

http://jsfiddle.net/37za8/13/

请注意，我删除了输入高度，取决于您设置的字体，您可能需要将其放回原处。 可以根据预期的值范围优化边距顶部值，我认为在这种情况下除以 10 可以达到某个点

通过 CSS 你可以做到这一点（但这真的取决于你打算如何动态）

.ui-spinner 
    height: 25px;

.ui-spinner .ui-icon 
    left:4px;

.ui-spinner  .ui-state-default 
    padding: 12px;

ui-spinner-input 
    width: 50px;

http://jsfiddle.net/37za8/9/

【讨论】：

这不是一个坏主意，但我无法让它动态工作 - jsfiddle.net/37za8/4 。如果我在输出之前设置了高度，它在控制台中是正确的高度，但仍然不好看。

为了更好地理解这一点，是否有某种代码可以动态设置高度？因为从外观上看，你真的不需要设置高度

这是一个简化版本。它旨在成为可以在多个应用程序中重用的组件。有些人希望它是 22 像素，有些人希望它是 28 像素。我需要能够将高度传递给它并让它正确绘制。 （我们可以假设我们不会传递小于字体的高度，但仅此而已。）

高度很容易适应，只需要将line-height固定为1，垂直对齐更难打破

【参考方案2】：

如果你混合使用 css 和 jquery，你应该能够实现你想要的：

css

.ui-spinner,
.ui-spinner > a,
.ui-spinner-input box-sizing:border-box;
.ui-spinner > a width:24px; text-align:center;
.ui-spinner span.ui-icon left:50%; margin-left:-8px;
.ui-spinner-input width:52px;

jquery

var spinner = $(".ui-spinner"),
    children = spinner.children();

 spinner.height(48); //added for test purposes (if you change the height it should change the inner object heights)

children.height(spinner.height() - 2);  //minus 2 is because the box-sizing hasn't taken into account the borders for some reason

Example