footer header dinamik yapmak

1-)HTML

<div class="header">

header

</div>

<div class="content">

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

content <br />

</div>

<div class="footer">

footer

</div>

2-)CSS

* {

padding: 0;

margin: 0;

}

html, body {

height: 100%;

display: flex;

flex-direction: column;

}

.header {

background: green;

padding: 20px;

}

.content {

background: yellow;

flex: 1;

padding: 20px;

overflow: auto;

}

.footer {

background: #ddd;

padding: 20px;

}

2-) DÜZENLENMİŞ ŞEKLİYLE

1-) CSS - html

    <div class="header">

        header

    </div>

    <div class="content">

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        content <br />

        <img src="~/Content/images/1.png" />

    </div>

    <div class="MyFooter">

        footer

    </div>

2-) CSS

* {

padding: 0;

margin: 0;

}

html, body {

height: 100%;

/*display: flex;

flex-direction: column;*/

}

.header {

background: green;

padding: 20px;

    position:fixed;

    height:50px;

    width:100%;

}

.content {

background: yellow;

/*flex: 1;*/

padding: 20px;

/*overflow: auto;*/

}

.MyFooter {

background: #ddd;

padding: 20px;

    width:100%;

    height:200px;

}