使用css

时间：2018-02-19 21:38:54

标签： css

我一直在寻找如何使用CSS样式表创建div的宽高比;我可以成功创建一个演示。宽高比工作正常但如果我的容器的宽度和高度比率更大，我找不到设置容器高度的方法（＃1场景）。

我成功地创建了＃2场景。但是当我尝试创建＃1场景时，容器的高度会扩展，这是我的代码：

HTML, body {
	margin:0;
    padding:0;
    height:100%;
}
    
#container{
	background: khaki;
    padding: 10px;
	display: table;
	width: 150px;
	height: 300px;
	transition: all .5s ease-in-out;
}

#container:hover {
    width: 500px; /* Only increasing the width */
  	height: 300px;
}

#c-ver-al {
	background: lightblue;
	padding: 10px;
	text-align: -webkit-center;
	display: table-cell;
    vertical-align: middle;
	height 100%;
    width: 100%;
}

#c-hor-al {
	background: pink;
	padding: 10px;
	text-align: -webkit-center;
	display: inline-block;
	object-fit: cover;
	height 100%;
    width: 100%;
}

#frame {
	padding: 10px;
	background: lightgray;
	height: 100%;
    width: 100%;
}

#window {
	width: 66%;
    padding-bottom: 75%;
	background: blue;
}

#chat {
	width: 33%;
    padding-bottom: 75%;
	background: red;
}

.content {
	display: inline-block;
    margin: -2px;
}
<html>
  <body>
  if you hover over it, only the container's width will be increased, not the height
  	<div id="container">
      <div id="c-ver-al">
        <div id="c-hor-al">
          <div id="frame">
            <div id="chat" class="content"></div>  
            <div id="window" class="content"></div>
          </div>
        </div>
      </div>
    </div>
    The height of the container should not change, but it is 
  </body>
</html>

注意：我只在div中添加了填充，因此可以更容易地看到它们当前的位置。另外，忽略我制作不好的演示，我是HTML和CSS的初学者，我可能错过了一些非常明显的东西。

编辑：我已经对css进行了悬停操作，因此您可以看到工作宽高比

1 个答案:

答案 0 :(得分：1)

问题在于你的两个内在元素'padding-bottom。由于 the box model ，当您将基于百分比的padding应用于元素时， calculates based off of the parents (bubbling) width ，忽略** height

要解决此问题，只需设置固定的padding-bottom：

即可 

HTML,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#container {
  background: khaki;
  padding: 10px;
  width: 350px; /* Increased for demo */
  height: 150px; /* To fit within snippet */
  display: table;
}

#c-ver-al {
  background: lightblue;
  padding: 10px;
  text-align: -webkit-center;
  display: table-cell;
  vertical-align: middle;
  height 100%;
  width: 100%;
}

#c-hor-al {
  background: pink;
  padding: 10px;
  text-align: -webkit-center;
  display: inline-block;
  object-fit: cover;
  height 100%;
  width: 100%;
}

#frame {
  padding: 10px;
  background: lightgray;
  height: 100%;
  width: 100%;
}

#window {
  width: 66%;
  padding-bottom: 75px;
  background: blue;
}

#chat {
  width: 33%;
  padding-bottom: 75px;
  background: red;
}

.content {
  display: inline-block;
  margin: -2px;
}
<html>

<body>
  <div id="container">
    <div id="c-ver-al">
      <div id="c-hor-al">
        <div id="frame">
          <div id="chat" class="content"></div>
          <div id="window" class="content"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

如果您想让孩子实际超过父容器，那么您将需要使用否定margin。

相关问题
最新问题