html - How can I create two full-width headers on the top of the page without position:absolute?

Question

I need to create two full-width headers but I can't seem to find a way to do them without using position absolute because if i use position:absolute, I can't use margin-bottom, which I need. What can I do?

This is what I have tried:

<div class="header1">
</div>

<div class="header2">
</div>

.header1 {
background-color: red;
    margin-top: 110px;
    color: #FFFFFF;
    height: 35px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.header2 {
background-color: blue;
    margin-top: 150px;
    color: #FFFFFF;
    height: 35px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

Answer 1

不确定我是否正确理解了问题，但是

body {
    margin:0
}
.header1 {
    background-color: red;
    color: #FFFFFF;
    height: 35px;
    width: 100%;
}
.header2 {
    background-color: blue;
    color: #FFFFFF;
    height: 35px;
    width: 100%;
}

会给你2个全宽标题

演示