*{ box-sizing: border-box; padding: 0; margin: 0; } html{ width: 100%; height: 100%; } body{ width: 100%; height: 100%; display: flex; flex-direction:column; } .head{ height: 5em; padding: 0 10%; background: #17b5fe; } .head .my-logo{ height: 100%; width: 15%; background-image: url("../img/my-logo.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .iframe-middle{ height: calc(100% - 5em); }