Question

考虑下面的基本HTML：

<body>
    Random HTML content
    <div class="container">
        <!--Some content loaded via ajax or the like -->
    </div>
    Other random HTML content
</body>

我希望“容器”div的宽度为三个潜在值的最大值：

100％的窗口
1024px（为了获得最佳视觉效果）
内容的宽度

通过使用CSS属性width：100％和min-width：1024px，我已经能够完成＃1和＃2。我也可以通过设置display来实现＃2和＃3：inline-block和min-width：1024px。但是，我无法得到所有这三个：如果我添加宽度：100％显示和最小宽度属性，它会覆盖内联块显示的子内容大小调整效果，并且只给我100％宽度，即使这意味着内容溢出。

我知道我可以隐藏溢出或者给div本身滚动条，但我想要的是div根据需要扩展，或者扩展到窗口的整个宽度，以较大者为准 - 但绝不会比1024px窄。

编辑：请注意，div中加载的内容可能小于1024px。然而，div本身应该永远不会少于它，因为它不再与页面其余部分的外观和感觉完美融合。

Answer 1

您可以通过在第一个div之上添加另一个div来实现此目的：

<div class="container2">
    <div class="container">
    </div>
</div>

的CSS：

.container2{min-width:100%;  display:inline-block;}
.container{min-width:1024px; width:100%;}

Answer 2

您可以使用虚拟伪元素扩充第二个提案，以便在不使用javascript的情况下实现所需的维度

        .container {
            min-width: 1024px;
            display: inline-block;
        }

        .container::before {
            width: 100vw;
            display: block;
            content: ' ';
        }

基本上，它会在容器顶部添加一个零高度元素，其宽度与视口相同，宽度为<body>宽度的100％。因此，它为已经实现＃2和＃3的现有解决方案增加了＃1。

并且它不会使用任何javascript，并且会在调整大小时保持正确。

Answer 3

使用javascript选择最大值，使用jQuery将该值分配给容器div的宽度。

    var window_width = $(window).width();
    var container_width = $('.container').width();
    var default_width = 1024px;

    var max_width = Math.max(window_width, container_width, default_widht);

    $('.container').css('width', max_width);

Answer 4

我对CSS不是很熟练，但我想我有办法解决这个问题。要同时拥有以像素为单位的最大宽度和以百分比为单位的最大宽度，您可以首先使用钳位方法计算宽度（这包括两个最大宽度中的第一个），然后添加一个正常的最大宽度-宽度。不幸的是，钳位方法相对较新，旧浏览器不支持。

<div class='container'></div>

CSS：

.container{
width:clamp(400px,250px + 25vw,100%);
max-width:700px;
}

这应该将最大宽度设置为 100% 和 700 像素。我已经在带有 Firefox 和 Chrome 的笔记本上对其进行了测试。

使div宽度最大为两个值？

4 个答案: