Question

因此，问题出在我的内容区域，只是试图扩展到页面宽度之外，然后向下移动。如果我将其设置为自动，它将继续这样做。我可以将最大宽度设置为小于导航栏占用的空间减去两个空间之间的空白空间，但是在调整窗口大小时会中断。

我准备好了JavaScript，以将宽度和高度的最小值设置为屏幕空间的百分比，以防止出现中断。仍在进行大量工作，但最大的问题是使内容区域仅保留在导航栏的侧面，并使导航栏和内容能够扩展到屏幕之外。假设内容最终缩小了大约两个屏幕长度。我希望导航栏继续下去。如何做到这一点，并防止内容区域跳到导航栏下方？

以下是该问题的一些照片。

https://imgur.com/a/LLGhzcT

以下是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()">
            &#9776;
        </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;
}

Answer 1

我决定只对laravel布局感到困惑，因为我无法使扩展的布局正常工作。因此，我将它们更改为包括在内，到目前为止，还没有看到任何中断，但是确实允许弹性框正常工作。

如何防止我的内容区域移动

1 个答案: