我有一个带有个性化标题栏(关闭和最小化按钮)的 Electron 应用程序。当我在窗口中显示所有 HTML 元素的边框时，我注意到我的正文和 HTML 标记并不占用整个窗口，而我需要它，因为我需要为窗口添加边框。不知道问题出在哪里，感谢您的帮助。
我尝试将 height: 100%; 放入 HTML 和 body 标记的 CSS 中，但这不起作用。我也尝试过使用 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>
感谢您的回复!
最佳答案
您的 100% 不会包含边框，因此它会溢出并添加滚动条。
将 box-sizing: border-box; 添加到您的 body
border-boxtells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
关于html - 主体不占用 Electron 应用程序中的整个可用空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58557300/