html – 设置父div的50％高度

概述我希望子div为父级的50％高度,因此如果父div为100％,则子div为50％,如果父div为1000px,则子div仍为50％. 这是我到目前为止http://jsfiddle.net/6PA6k/17/所做的基本小提琴 这是html <div class="wrapper"> <div class="button-container"> <div class="button">< 我希望子div为父级的50％高度,因此如果父div为100％,则子div为50％,如果父div为1000px,则子div仍为50％.

这是我到目前为止http://jsfiddle.net/6PA6k/17/所做的基本小提琴

这是HTML

<div >  <div >    <div ></div  </div></div>

这是CSS

* {  margin:0;  padding:0;}HTML {  height:100%;  wIDth:100%;}body {  height:100%;  wIDth:100%;}.wrapper {  height:100%;  wIDth:100%;  background:red;}.button-container {  height:100%;  wIDth:50px;}.button {  wIDth:50px;  height:50px;  background:blue;}

解决方法 更新

演示：http://jsfiddle.net/6PA6k/22/

* {    margin:0;    padding:0;}HTML {    height:100%;    wIDth:100%;}body {    height:100%;    wIDth:100%;}.wrapper {    position: relative;    height:80%;    wIDth:100%;    background:red;}.button-container {    position: relative;    height:50%;    wIDth:300px;    background:blue;}.button {    position: absolute;    top: 50%;    height:50px;    wIDth:50px;    background:yellow;    margin-top: -25px;}

总结

以上是内存溢出为你收集整理的html – 设置父div的50％高度全部内容，希望文章能够帮你解决html – 设置父div的50％高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。