У меня есть приложение Electron с персонализированной строкой заголовка (кнопка «Закрыть и свернуть»). Когда я показываю границы всех элементов HTML в моем окне, я заметил, что мое тело и мой тег HTML не занимают всего окна, и мне это нужно, потому что мне нужно поместить границу в мое окно. Я не знаю, в чем проблема, спасибо за вашу помощь.
Я пытался поместить height: 100%; в CSS для HTML и тега body, но это не работает. Я также пробовал с margin: auto;, но это тоже не работает.
Вот скриншот приложения, сначала с height:100% (с полосой прокрутки, и я не хочу его), а затем без.
CSS:
*/*, *::after, *::before*/ {
/* ~~~~~~ Disable elements dragging ~~~~~~ */
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-app-region: no-drag;
/* ~~~~~~~~~~~~~ Reset script ~~~~~~~~~~~~ */
cursor: default;
margin: 0;
padding: 0;
border: 2px solid blue;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html,
body {
/*height: 100%;*/
border: 4px solid red;
background-color: #212121;
}
#TitleBar {
-webkit-app-region: drag;
background-color: #1a1a1a;
}
/* ##################################################################### */
/* ############################### Images ############################## */
/* ##################################################################### */
#Icon {
width: 4%;
height: 4%;
}
#ControlButtons {
float: right;
}
#Close-Btn {
width: 30px;
height: 30px;
}
#Min-Btn {
width: 30px;
height: 30px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MyClipboard</title>
<link rel="stylesheet" href="Styles/HomeStyle.css" />
</head>
<body>
<div id="TitleBar">
<img src="Images/clipboard_96px.png" id="Icon"></img>
<div id="ControlButtons">
<input type="image" id="Min-Btn" src="Images/minimize_window_96px.png">
<input type="image" id="Close-Btn" src="Images/close_window_96px.png">
</div>
</div>
<div id="Menu"></div>
<div id="Content"></div>
<script>
require('./Control.js')
</script>
</body>
</html>
Спасибо за ваш ответ!