所以问题源于我的内容区域只是试图扩展到页面宽度之外，因此它向下移动。如果我将其设置为自动，它将继续这样做。我可以将最大宽度设置为小于导航栏占用的空间减去两者之间空白的空间，但它会在调整窗口大小时中断。
我有 javascript 来将宽度和高度的最小值设置为屏幕空间的百分比，以防止中断。许多工作仍在进行中，但最大的问题是让内容区域简单地保留在导航栏的一侧，并让导航栏和内容能够延伸到屏幕之外。假设内容最终缩小了大约两个屏幕长度。我希望导航栏继续向下。我该怎么做才能防止我的内容区域跳到导航栏下方？
这是问题的一些照片。
这是 html、javascript 和 css 的大部分代码。出于某种原因，JSFiddle 不喜欢它，但它在实际网页中一切正常。我再次使用 Laravel 作为我的 PHP 框架，代码大致如下:
@extend ("shared/layouts/topbar")//顶部栏的代码 等
https://jsfiddle.net/D3FAULTJ3ST3R/4h0jqr1g/6/
jsfiddle 不喜欢尝试加载我的屏幕尺寸功能或切换侧边栏功能，无论出于何种原因，我什至无法让侧边栏出现在 jsfiddle 中。但是从您可以看到的照片来看，侧边栏工作得很好，只是在内容变小的情况下它不会延伸到屏幕之外。
我尝试过不同的显示方式，例如 flex、inline 等。我试图让它们成为同一个 div 的一部分。我试过去掉扩展名并将它们全部放在同一个 html 文件中。
HTML:
<body data-spy="scroll" onload="setScreenSize()">
<div id="topbar" class="topbar" style="background-color: blue">
<div id="sidebar-share" class="sidebar-share">
<div id="sidebar-toggler" class="sidebar-toggler" onclick="toggleSidebar()">
☰
</div>
<a href="http://portalx.XXXXXXXX.net/portalx">
<div id="apx-label" class="apx-label">
Portal X
</div>
</a>
</div>
<a href="http://portalx.XXXXXXXX.net/portalx">
<div id="app-name" class="app-name">
</div>
</a>
</div>
<div id="sidebar" class="sidebar" style="background-color: blue">
<div id="profile-block" class="profile-block">
</div>
</div>
<div id="contentarea" class="contentarea" style="background-color: red">
<h1 style="clear: both;"> Yelp asdfasdfasdfsadassjfldkj;asdlkfjalks;djflkajsdlfkja;lksdfjlkajasdlfmhklajsdkfljaskld;jflkasjdflkjasl;kdfjajsd;lkfjlkasjdfsdfkjalksd;fjalksdjfl;kajsdlk;fal;ksdjflkasjdlf;kjalsk;dfjlka;sjdflk;jasld;kfjla;skdjf;lkajsdflkjaslkd;fja;lskdjfl;kasjdfdf aklsjd;;;;;;lksdjflkjalskdjfklkjlsdl;kfjlkasdjfjas;lkdjfklj;aslkdjflajs;dfjk;asjd;lfjaklsdfj</h1>
</div>
</body>
CSS:
/* Portal X CSS */
/*
Programmer: XXXXXXX
Created: 07/17/2019
Intention: This will be the css file used by the master
layout.
*/
/* CSS for Everything */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
white-space: 0;
font-size: 100%;
}
/* CSS for Content Area */
.contentarea {
height: 95%;
width: auto;
float: left;
}
/* CSS for Top Bar Objects */
.topbar {
height: 5%;
width: 100%;
float: left;
}
.sidebar-share {
height: 100%;
width: 10%;
}
.sidebar-toggler {
height: 100%;
width: 30%;
float: left;
font-size: 35px;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.apx-label {
height: 100%;
width: 70%;
float: left;
overflow-x: hidden;
overflow-y: hidden;
vertical-align: middle;
font-family: arial, serif;
}
/* CSS for Side Bar Objects */
.sidebar {
height: 95%;
width: 3%;
float: left;
overflow-x: hidden;
overflow-y: hidden;
}
a, a:visited {
color: inherit;
}
.profile_img {
width:85px;
height:85px;
}
Javascript:
/* Portal X Javascript */
/*
Programmer: XXXXXXX
Created: 07/17/2019
Intention: This is the javascript for the master layout of Portal X.
*/
function toggleSidebar() {
if(document.getElementById("sidebar").style.width == "10%") {
var sideWidthMin = screen.width * (3/100);
var maxContent = screen.width - sideWidthMin - 4;
document.getElementById("sidebar").style.width = "3%";
document.getElementById("sidebar").style.minWidth = sideWidthMin;
document.getElementById("contentarea").style.maxWidth = maxContent;
}
else {
var sideWidthMin = screen.width * (1/10);
var maxContent = screen.width - sideWidthMin - 4;
document.getElementById("sidebar").style.width = "10%";
document.getElementById("sidebar").style.minWidth = sideWidthMin;
document.getElementById("contentarea").style.maxWidth = maxContent;
}
}
function setScreenSize() {
var topHeightMin = screen.height * (5/100);
var sideWidthMin = screen.width * (1/10);
var maxContent = screen.width - sideWidthMin - 4;
var toggleWidth = sideWidthMin * (3/10);
var apxWidth = sideWidthMin * (7/10);
document.getElementById("sidebar").style.minWidth = toggleWidth;
document.getElementById("sidebar").style.width = "3%";
document.getElementById("topbar").style.minHeight = topHeightMin;
document.getElementById("sidebar-share").style.minWidth = sideWidthMin;
document.getElementById("sidebar-toggler").style.minWidth = toggleWidth;
document.getElementById("apx-label").style.minWidth = apxWidth;
}
最佳答案
我决定稍微修改一下 Laravel 布局，因为我无法让扩展布局正常工作。所以我将它们更改为包含，到目前为止还没有看到任何因此而中断的情况，但它确实允许 flexbox 正常工作。
关于javascript - 如何防止我的内容区域移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57328231/