Boa noite. Meu problema é o seguinte, quando tela é muito pequena e é mostrado a barra de rolagem o footer não extende mais para 100%.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>JSON2CSV</title>
</head>
<body>
<div id="container">
<div id="app">
<di>
<h1 id="app-title">JSON to CSV</h1>
</di>
<div class="div-input">
<label for="text-input">JSON</label><br>
<textarea name="" id="text-input" cols="30" rows="10"></textarea>
</div>
<div class="div-actions">
<div class="div-buttons">
<input type="button" value="Convert" class="button" id="button-convert" onclick="onConvert();">
<input type="button" value="Clear" class="button" id="button-clean" onclick="onClean();">
</div>
</div>
<div class="div-output">
<label for="text-output">CSV</label><br>
<textarea name="" id="text-output" cols="30" rows="10" readonly></textarea>
</div>
</div>
<footer>
<p class="footer-content">Made with <span id="heart-emoji">❤</span> by <a href="http://" target="_blank" rel="noopener noreferrer" id="link-profile">Thiago</a></p>
</footer>
</div>
<script src="js/app.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
background-color: #03A9F4;
width: 100%;
}
input[type],
textarea {
border: 1px solid #03A9F4;
border-radius: 3px;
}
textarea {
width: 100%;
height: 90%;
overflow: auto;
resize: none;
}
.div-input,
.div-output {
width: 40%;
float: left;
height: 90%;
}
.div-actions {
width: 20%;
float: left;
padding-top: 30px;
text-align: center;
position: relative;
height: 90%;
}
.div-buttons {
top: 50%;
position: absolute;
transform: translateY(-50%);
}
#app {
width: 700px;
height: 400px;
border: 1px solid red;
border-radius: 5px;
padding: 10px;
background-color: white;
overflow: hidden;
}
#app-title {
text-align: center;
color: #03A9F4;
}
label {
color: #03A9F4;
}
.button {
cursor: pointer;
padding: 5px;
}
.button:hover {
opacity: 0.8;
}
#button-clean,
#button-convert {
border: 1px solid #03A9F4;
width: 100px;
}
#button-convert {
background-color: #03A9F4;
color: white;
}
#button-clean {
background-color: white;
color: #03A9F4;
margin-top: 10px;
}
footer {
background-color: black;
height: 100px;
min-width: 100vw;
position: absolute;
bottom: 0;
display: block;
}
.footer-content {
display: block;
text-align: center;
color: grey;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#heart-emoji {
color: red;
}
#link-profile:link {
text-decoration: none;
}
#link-profile:hover {
text-decoration: underline;
color: white;
}