Question

我正在研究用CSS制作六边形的方法，并找到了一个基于宽度给出正六边形的解决方案：

.hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
}

但是，代码的工作原理是根据父元素的宽度生成新的矩形。我正在寻找一种根据父母身高计算宽度的方法。

有没有办法使用元素的height属性而不是calc()的宽度？（我不打算使用vh，因为最近的父节点并不总是视口。我用Google搜索，无法找到答案。

Answer 1

我认为你试图用css语法运行脚本，这是不可能。

calc（）可以用绝对值做基本的数学运算，它找不到元素的高度，然后对它进行数学运算。

如果您找到了解决方案，请告诉我。这会有很多帮助

干杯!!

Answer 2

不可能，就像@YAMAN所说的那样，但我有一个技巧可以与您分享，以防万一它起作用并为您提供帮助。

top: calc(50% - 0.59em);

要进行测试，给定一个带有大小和文本的div，您可以增加字体大小，手动获取高度并将其除以2，用该值替换0.59em，您可能会看到它们保持不变在相同的像素中。

请注意，我已经知道这不是100％精确的，但是在某些情况下它确实很不错，请为您检查一下，也许适合您的情况。

Answer 3

我建议定义一个取决于css var的css规则（由Carles Alcolea提出），并实现一个JavaScript代码来更新css var的值。

定义使用var（）的css

.hexagon.parent {
  /* ... */
  width: var(--hex-parent-height);
}

在html中创建一个占位符以保存var（s）定义

<style id="my-dyn-css">
/* dynamically define css vars here */
</style>

定义一个函数来设置和更新var的值（例如，在调整窗口大小时）

function updateDynCss() {
  var parentHeight = computeHeight();
  var style = ":root{--hex-parent-height:" + parentHeight + "px;}";
  $("#my-dyn-css").empty().html(style);
}

Answer 4

许多人多次提到，使用纯CSS不能基于100％的高度设置宽度。

如果您知道或可以算出宽高比，则从技术上来讲您知道宽度，就可以很容易地计算出宽度。

.wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 or widescreen aspect ratio */
}
.hexagon {
    top: 0;
    position: absolute;
    width: calc(100% * 9 / 16); /* or simply 56.25%; */
}

如果长宽比未知，则使用CSS的唯一可行解决方案是使用px或em值设置父元素的高度（或最小高度）。也可以使用CSS变量来设置这些变量，尽管某些旧版浏览器并不完全支持CSS变量。

.wrapper {
    min-height: 400px;
}
.hexagon {
    width: calc(400px * 0.57735);
}

最后，如果高度是完全动态的，例如其高度根据文本的行数而变化，则需要使用javascript计算宽度。

// Example using jQuery, but the principles should be the same.
jQuery(function($){
    var hexagon = $('.hexagon');
    // Resizing the document may change the height of the parent element.
    $(window).on('resize', function() {
        hexagon.each(function(){
            // We'll remove the existing width before calling parent.height()
            $(this).css({width:''}).css({width:$(this).parent().height()});
        });
    }).trigger('resize');
});

请注意，如果子元素更改时父元素的大小更改，则javascript解决方案可能无法提供准确的结果。这也是在CSS中使用高度值的挑战之一，为什么几乎所有内容都基于宽度。

Answer 5

您可以使用中介程序 CSS变量来规避此问题，它是大括号之外唯一的数据。

如果父级的宽度也是动态的或取决于其他值，请为此使用另一个变量。就像一个可以看到语法的示例一样，它看起来像这样：

<Window x:Class="myWPFApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfMkTxTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="1140.038">
    <Grid>
        <!-- Set the styles for the tool bar. -->
        <Grid.Resources>
            <Style TargetType="{x:Type Button}" x:Key="formatTextStyle">
                <Setter Property="FontFamily" Value="Palatino Linotype"></Setter>
                <Setter Property="Width" Value="30"></Setter>
                <Setter Property="FontSize" Value ="14"></Setter>
                <Setter Property="CommandTarget" Value="{Binding ElementName=mainRTB}"></Setter>
            </Style>

            <Style TargetType="{x:Type Button}" x:Key="formatImageStyle">
                <Setter Property="Width" Value="30"></Setter>
                <Setter Property="CommandTarget" Value="{Binding ElementName=mainRTB}"></Setter>
            </Style>

            <Style TargetType="{x:Type RichTextBox}">
                <Setter Property="FontFamily" Value="calibri (body)" />
                <Setter Property="FontSize" Value="11" />
            </Style>

            <Style TargetType="{x:Type Paragraph}">
                <Setter Property="Margin" Value="0" />
            </Style>
        </Grid.Resources>

        <DockPanel Name="mainPanel">

            <!-- This tool bar contains all the editing buttons. -->
            <ToolBar Name="mainToolBar" Height="30" DockPanel.Dock="Top">
....
<Button Style="{StaticResource formatImageStyle}" Command="ApplicationCommands.Copy" ToolTip="Copy">
  <Image Source="Images\editcopy.png"></Image>
</Button>
<Button Style="{StaticResource formatImageStyle}" Command="ApplicationCommands.Paste" ToolTip="Paste">
  <Image Source="Images\editpaste.png"></Image>
</Button>
....

        </DockPanel>
    </Grid>
</Window>

CSS变量具有两种类型的作用域：全局和局部。局部变量只能在同一选择器中进行逻辑工作，而全局变量在所有CSS中都是相同的。全局声明一个或多个变量是通过root块完成的，如代码示例所示。

如您所见，检索var值就像使用var（）CSS函数一样容易，如果您不知道它，它具有非常强大的回退功能。

例如，如果您要动态设置:root { --hex-parent-height: 10px; } .hexagon.parent { /* ... */ width: var(--hex-parent-height); } .hexagon { height: 100%; width: calc(100% * var(--hex-parent-height)); display: inline-block; }而出问题了，而var未设置，则可以插入默认值以最大程度地减少损失，例如：--hex-parent-height

如何使用CSS calc（）与元素的高度

5 个答案: