27

min-heightのようなcssプロパティはありますが、top用ですか？以下の例では、（javascriptを介して）div1を非表示にするときに、div2にtop：50を設定します。それ以外の場合は、div1の下に配置します。

<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を任意の高さ（または非表示にすることもできる）のツリービューとして想像し、div2を常に50px未満にする必要がある段落として想像してください。

4

6 に答える 6

6

私は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-14T16:25:46.017 に答える
3

いいえ、そのようなものはありませんmin-top

代わりに使用できます

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

そして、あなたが示した例visibility: hidden;では、あなたの隠されたスペースを予約するので、ここで最も適していますdiv

于 2013-03-21T16:00:28.967 に答える
2

これでうまくいくと思いますが、あまり良い習慣ではないと思います。

#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機能することを確認できます。）

于 2013-03-21T16:50:46.163 に答える
1

この質問にはまだ多くの見解があり、人々はまだコメントしているようです。質問が完全に答えられていないという事実のために、私はここに完全な答えを書くことにしました：

適切な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のすぐ下に配置されます
于 2016-05-25T09:44:04.373 に答える
1 

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

于 2018-01-15T14:55:19.223 に答える
0

「cssmin-topプロパティはありますか？」いいえ、でも..。

... math関数を使用して、min-topのように有効にすることができます。

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

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

于 2020-10-29T10:05:14.613 に答える