Question

我有一个容器DIV，里面有两个DIV。第一个DIV（我的画布）需要在容器内的0 0处定位absoulte。我希望第二个DIV占据下面剩下的50％的空间。成品需要有响应。我坚持如何定位第二个DIV。

我有以下HTML：

class MorphologyCollectionViewCell: UICollectionViewCell {


var morphology : Morphology! {

    didSet {
        updateUI()
    }
}


@IBOutlet weak var image: UIImageView!

@IBOutlet weak var title: UILabel!




private func updateUI() {
    image?.image! = morphology.image
    title?.text! = morphology.title

   }

}

我的CSS是：

<div class="container map-container">
    @include('maps.world-map')
    <div id="my-canvas"></div>
    <div id="their-canvas"></div>
</div>

我正在尝试找出下面画布的CSS

.map-container {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 1728px;
  max-height: 1080px;
  overflow: hidden;
  margin: 50px auto 0 auto;
}

#my-canvas,
#their-canvas {
  padding: 0;
  text-align: center;
  position: absolute;
  max-width: 1728px;
  max-height: 540px;
  width: 100%;
  height: 50%;
  z-index: 999998;
  opacity: 0.8;
}
#my-canvas {
  left: 0;
  top: 0;
}

谢谢！

Answer 1

您可以使用botton:0px, height: 50%;设置第二个div。查看下面的更新代码段

＆＃13;

$('.map-container').height($(window).height()-55);
$(window).resize(function(){
  $('.map-container').height($(window).height()-55);
})

＆＃13;

body {
  padding: 0px;
  margin: 0px;
}
.map-container {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 1728px;
  max-height: 1080px;
  overflow: hidden;
  margin: 50px auto 0 auto;

}

#my-canvas,
#their-canvas {
  padding: 0;
  text-align: center;
  position: absolute;
  max-width: 1728px;
  max-height: 540px;
  width: 100%;
  height: 50%;
  z-index: 999998;
  opacity: 0.8;
}
#my-canvas {
  left: 0;
  top: 0;
  background: red;
}
#their-canvas {
  height: 50%;
  bottom: 0px;
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container map-container">
    <div id="my-canvas">my-canvas</div>
    <div id="their-canvas">their-canvas</div>
</div>

＆＃13;

Answer 2

目前尚不清楚“你需要做出回应”是什么意思。

但是如果你想把你的第二个画布放在下面，你可以设置一个top: 50%;属性。由于您使用的是画布的height和top的相对值，因此其父级需要定义height或min-height

请参阅https://jsfiddle.net/NotANumber/3k2go0qf/

Answer 3

尝试以下代码，使用CSS本身就可以实现，

*{
  padding:0px;
  margin:0px;
}

.map-container {
  position: absolute;
  display: block;
  width: 100%;
  max-width: 1728px;
  max-height: 1080px;
  height:100%;
}

#my-canvas,
#their-canvas {
  text-align: center;
  position: absolute;
  max-width: 1728px;
  max-height: 540px;
  width: 100%;
  height: 50%;
  z-index: 999998;
  opacity: 0.8;
}
#my-canvas {
  background: red;
}
#their-canvas {
  bottom: 0px;
  background: green;
}

<div class="container map-container">
    <div id="my-canvas"></div>
    <div id="their-canvas"></div>
</div>

容器内的两个div已经过时了

3 个答案: