是否有一个CSS最小性能

是否有任何CSS属性像最小高度，但顶部？在下面的例子中，当我隐藏div1（通过JavaScript），我想div2顶部：50。否则，将被放置在div1以下。是否有一个CSS最小性能

<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>

编辑：我回答下面

当DIV1没有隐藏我想DIV2是正好低于DIV1。想象DIV1因为它可以有任何高度（甚至是隐藏的）一个TreeView和DIV2为一个段落应该始终低于50像素

来源

2013-03-21 Thanos Darkadakis

你的意思是'保证金top'Ø r'padding-top'？ – 2013-03-21 15:59:00

我看到这个问题有许多仍然意见和人还在评论。因为事实是，问题不完全回答的，我决定在这里写出完整的答案：

相应的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的顶部属性为50px
当DIV1不隐藏：
- 如果DIV1高度小于50像素，那么DIV2被放置在50像素
- 如果DIV1高度超过50像素，那么DIV2下DIV1

来源

2016-05-25 09:44:04

没有没有什么能像min-top

相反，你可以使用是

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

并为您显示visibility: hidden;将在这里是最适合的，因为它会保留你的隐藏div

来源

2013-03-21 16:00:28

如果我这样做，那么div2将有顶部：150当div1没有隐藏（总是比div1多50）和顶部：当div1 id隐藏时为50。当div1不隐藏时，我想让div2恰好低于div1。想象div1作为一个树形视图，它可以有任何高度和div2作为一个段落，应该始终低于50px – 2013-03-21 16:03:22

@ThanosDarkadakis JS是唯一的选择，否则使用'visibility：hidden'来隐藏以及为元素保留空间 – 2013-03-21 16:04:09

我的空间的例子怀疑这将这样的伎俩你，但我相信这是不是一个很好的做法：

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

DEMO：http://jsfiddle.net/pavloschris/tbbvU/

（只是注释/取消注释的display:none以了解其工作）

来源

2013-03-21 16:50:46 xpy

有一个当我在div1中写入太多东西时出现问题。检查演示在这里：http：//jsfiddle.net/tbbvU/2/ – 2013-03-22 13:37:02

问题解决，如果您替换“高度：100px”与“最小高度：50px” – 2013-03-22 13:43:01

我想出了这个利用top：0 bottom：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; 
}

HTML：

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

来源

2016-01-14 16:25:46 JRT

当最小高度小于高度窗口 http://jsfiddle.net/gxp05jk5/ – 2016-01-18 12:25:24

对不起，我不明白你的问题，你能否详细解释一下？ – JRT 2016-01-18 12:28:24

这个问题已经用xpy的答案解决了，我对他的回答发表了评论 – 2016-01-18 12:34:45

$(window).on("resize", function() { 
 
    if ($('#div1').css('display', 'none')){ 
 
    \t $("#div2").addClass('minTop'); 
 
\t } else if ($('#div1').css('display', 'block')){ 
 
\t \t $("#div2").removeClass('minTop'); 
 
\t } 
 
}).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>

来源

2018-01-15 14:55:19

很好的答案，但一点解释文字会很好 – Yannjoel 2018-01-15 15:04:39

是否有一个CSS最小性能

回答

相关问题