是否存在css最小顶层属性

hl0ma9xz 于 2023-02-17 发布在其他

关注(0)|答案(8)|浏览(122)

有没有像min-height这样的css属性，但是用于top的？在下面的例子中，当我隐藏div 1（通过javascript）时，我希望div 2的top：50。否则，将放在div 1下面。

<html>
<head>
<style>
#div1
{
height:100px;
}
#div2{
//min-top:50px;
}
</style>
</head>

<body>
<div id='div1'>This div may be hidden</div>
<div id='div2'>This div must not be placed above 50px</div>
</body>
</html>

编辑：正如我下面的回答
当div 1没有隐藏时，我希望div 2正好低于div 1。假设div 1是一个树视图，可以有任何高度（甚至可以隐藏），div 2是一个段落，应该始终低于50 px

css

来源：https://stackoverflow.com/questions/15552358/is-there-a-css-min-top-property

8条答案

按热度按时间

brccelvz1#

我想出了这个解决方案，利用顶部：0底部：0黑客.
我们创建一个容器的高度是它的相对父（如果有的话）-然后我们给予它一个最小高度（例如你的最小顶部）
然后，我们将实际元素绝对定位到该容器的底部。
CSS：

.container {
  position:absolute;
  bottom:0px;
  top: 0;
  min-height: 700px; //Adjust this to your MINIMUM (eg your min-top)
}

.position-me {
  position: absolute;
  bottom: 0;
}

超文本：

<div class="container">
    <div class="position-me">Great!</div>
</div>

赞(0）回复(0）举报 2023-02-17

6ojccjat2#

“有CSS迷你顶房吗？”没有，但是...
...您可以使用数学函数来实现类似min-top的效果：

<style> 
  #div2{
    top:max(50px, 10%);
  }
</style>

https://developer.mozilla.org/en-US/docs/Web/CSS/max

赞(0）回复(0）举报 2023-02-17

sycxhyv73#

不，没有比min-top更好的了
你可以用is

div {
   position: relative;
   top: 50px;
}

对于您展示的示例，visibility: hidden;最适合这里，因为它将保留隐藏的div的空间

赞(0）回复(0）举报 2023-02-17

5tmbdcev4#

我猜想这对你来说会有用，但我相信这不是一个很好的实践：

#div1
{
    height:100px;
    outline: 1px solid red;
    margin-bottom:-50px;
}
#div2{
    margin-top:50px;
    outline: 1px solid blue;
}

演示：http://jsfiddle.net/pavloschris/tbbvU/
（只需注解/取消注解display:none即可查看其工作情况。）

赞(0）回复(0）举报 2023-02-17

uqcuzwp85#

我看到这个问题还有很多意见，大家还在评论，因为这个问题没有完全回答，所以我决定把完整的答案写在这里：

- 相应的CSS：**

#div1 {
    min-height:50px;
    background-color: #fee;
    margin-bottom:-50px;
}
#div2 {
    margin-top:50px;
    background-color: #efe
}

http://jsfiddle.net/vVsAn/5051/

- 结果**
隐藏div1时，div2的top属性为50px
当div1未隐藏时：
如果div1的高度小于50px，则div2的高度为50px
如果div1的高度大于50px，则div2将放置在div1的正下方

赞(0）回复(0）举报 2023-02-17

mspsb9vt6#

$(window).on("resize", function () {
    if ($('#div1').css('display', 'none')){
    	$("#div2").addClass('minTop');
	} else if ($('#div1').css('display', 'block')){
		  $("#div2").removeClass('minTop');
	}
}).resize();

#div1{
width:100px;
height:100px;
background-color:#ff0000;
position:absolute;
display:block;
/* display:none; */
}
#div2{
width:100px;
background-color:#ffff00;
top:150px;
position:absolute;
}
#div2.minTop{
  top:50px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>

<body>
<div id='div1'>div 1</div>
<div id='div2'>div 2</div>
</body>
</html>

赞(0）回复(0）举报 2023-02-17

tpxzln5u7#

使用边距的解决方案

另请参见使用position:sticky的解决方案。
下面的解决方案使用css3 selector“，其前面紧跟”“或”“，后面紧跟”“，并且通过在前面的元素上切换预定义的类（在本例中为.hidden）来工作。

#div1.hidden + #div2 {
  margin-top: 50px;
}

.hidden {
  display: none;
}

x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-02-17

zlwx9yxi8#

使用`position: sticky`的解决方案

另请参见使用边距的解决方案。
为了达到类似的效果，你可以使用position: sticky，它和top-min并不完全一样，但是它可以和父样式一起巧妙地调整以达到你的目的。

.sticky {
  /* Note: The parent element must have a non-default position set too. */
  position: sticky;
  top: 50px;
}

注意：position:sticky元素的父元素也必须具有非默认position集。*

这样做的目的是，当元素通过滚动、降低视区高度或更改布局向上移动时，它将停留在定义的位置，直到父元素本身越过边界并将元素推到一边（如下图动画所示）。

x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-02-17

我来回答

是否存在css最小顶层属性

8条答案

使用边距的解决方案

使用`position: sticky`的解决方案

相关问题

热门标签

最新问答

是否存在css最小顶层属性

8条答案

使用边距的解决方案

使用position: sticky的解决方案

相关问题

热门标签

最新问答

使用`position: sticky`的解决方案