I have some popup that looks like:
But I have 3 problems:
- The scroller is streaching on all popup, but I want is to streach only on popup inner content.
- The line separetor should be same line as aqua backgroung color.
The fixed header hides the content, but I want the table to begin after header.
![enter image description here]()
My code:
body {
margin: 0;
width: 417px;
font-size: 16px;
height: 505px;
}
#popup_header {
height: 70px;
background-color: #0a3d63;
color: white;
border-bottom: 5px solid #2672fb;
position: fixed;
width: 100%;
}
td:not(.tds),
th {
padding: 15px 15px;
}
#scan-history-table {
width: 100%;
}
#cog-button {
float: right;
background: none;
color: white;
border: none;
cursor: pointer;
float: right;
margin: 12px;
margin-top: 20px;
}
#popup_logo_div {
width: 210px;
float: left;
/* margin: 20px 0px 0px 10px;*/
margin: 15px 0px 0px 5px;
}
img {
height: 35px;
}
hr {
/* background-size: 5px 1px;*/
opacity: 0.4;
}
a {
/* font-size: 16px;*/
cursor: pointer;
}
a:hover {
color: #a0ce38;
}
#bottom_banner {
/* position: absolute;*/
/* position: fixed;*/
bottom: 0px;
width: 100%;
position: fixed;
background-color: aqua;
text-align: center;
/* background-color: red;*/
/* margin-top: 70px;*/
/* font-size: 12px;*/
}
i {
margin-top: 7px;
}
.tds {
text-align: center;
/* height: 20px;*/
/* width: 50%;*/
}<div id="popup_header"><div id="popup_logo_div"><img alt="Settings" src="img/GS logo - one line - white.png" /></div><button id="cog-button" type="button"><a id="index_link"> <i class="fa fa-cog fa-lg fa-fw" style="font-size:27px;"></i></a></button></div><section id="inner-content"><table id="scan-history-table" border=1 frame=void rules=rows><tbody></tbody></table></section><div id="bottom_banner"><hr><a id="clear_compleated_btn">Clear</a></div>