23 Ocak 2017 Pazartesi

CSS Responsive Height

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
    position: relative;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding-bottom:calc(100% - 400px);
    text-align: center;
    height:100%;
    min-height:400px;
}
.ek{
width:100%;
height:50px;
display:block;
border:1px solid #000;

}
</style>
</head>
<body>

<div style="width:80%;min-height:600px;background:blue;">
<div id="div1">Örnek yazı...</div>
<div class="ek">ek</div>
<div class="ek">ek</div>
<div class="ek">ek</div>
<div class="ek">ek</div>
<div class="ek">ek</div>
<div class="ek">ek</div>
<div class="ek">ek</div>
<div class="ek">ek</div>
<div class="ek">ek</div>
<div class="ek">ek</div>

<div>
</body>
</html>


Örnek Yazı...
ek
ek
ek
ek
ek
ek
ek
ek
ek
ek