Question

我有一个侧边栏和我网站内容的区域。侧边栏已修复，但页面内容可以滚动。然而，当调整浏览器窗口大小时，页面内容div被设置为向左浮动，因此它被设置为向左浮动，我希望它永远不会向左移动（目前它将慢慢隐藏在侧边栏内容）。您可以在下面的屏幕截图中看到发生了什么：

第一个屏幕截图显示了全屏浏览器窗口，下面的屏幕截图显示了浏览器窗口调整大小时的情况：

如何让页面内容调整大小，居中并且永远不会超过侧边栏的位置，因为当前图像及其下方的文本将隐藏在侧边栏下方，而是希望它对侧边栏进行调整。我的代码如下。

＆＃13;

/* Main CSS */
html, body {
    padding: 0;
    margin: 0;
    font-family: "Futura PT", sans-serif;
}

    /* Sidebar */
#sidebar {
    background-color: #FFFFFF;
    width: 400px;
    height: 100%;
    padding: 10px;
    float: left;
    position: fixed;
}


/* Page Content */
#pageContentContainer {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

#pageContent {
    float: right;
    width: 78%;
    background-color: #212121;
}

＆＃13;

<body>
    <div id="sidebar">
        <a href="index.html"><img src="images/logo/mdLogo.png"></a>
        <nav>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="#">PHOTOGRAPHY</a></li>
                <li><a href="#">GRAPHIC DESIGN</a></li>
                <li><a href="#">3D MODELLING</a></li>
            </ul>
        </nav>
        <div id="socialLinks">
            <a href="#/" class="fa fa-linkedin fa-3x"></a>
            <a href="#/" class="fa fa-facebook fa-3x"></a>
            <a href="#/" class="fa fa-youtube-play fa-3x"></a>
        </div>
        <p>&copy; Macast Designs 2017</p>
    </div>
    
    <div id="pageContentContainer">
        <div id="pageContent">
            <!-- Parallax -->
            <div class="parallaxImage1"></div>

            <div class="parallaxContent">
                <h1>A little about me...</h1>
                <p>Information goes here.</p>
            </div>

            <div class="parallaxContent">
                <h1>A little about me...</h1>
                <p>Information goes here.</p>
            </div>

            <div class="parallaxContent">
                <h1>A little about me...</h1>
                <p>Information goes here.</p>
            </div>

            <div class="parallaxContent">
                <h1>A little about me...</h1>
                <p>Information goes here.</p>
            </div>
        </div>
    </div>
</body>

＆＃13;

非常感谢任何帮助！它可能是一些简单的我可能错过了某个地方？谢谢！

Answer 1

因为您的侧边栏是stage.fireEvent( new WindowEvent( stage, WindowEvent.WINDOW_CLOSE_REQUEST ) );，所以它会从布局的常规流程中取出，并且浮动将无法按照您期望的方式运行。尝试在position: fixed div上设置400px的左边距。见下文。

#pageContent

/* Main CSS */
html, body {
    padding: 0;
    margin: 0;
    font-family: "Futura PT", sans-serif;
}

    /* Sidebar */
#sidebar {
    background-color: #FFFFFF;
    width: 400px;
    height: 100%;
    padding: 10px;
    position: fixed;
}


/* Page Content */
#pageContentContainer {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

#pageContent {
    margin-left: 400px;
    width: 78%;
    background-color: #212121;
}

Answer 2

我不确定我是否理解这个问题。但我认为问题在于你使用的是固定值（px），你可以将宽度扩散为（％），但要始终调整，你必须使用媒体查询。

/* Main CSS */
html, body {
    padding: 0;
    margin: 0;
    font-family: "Futura PT", sans-serif;
}

    /* Sidebar */
#sidebar {
    background-color: #FFFFFF;
    max-width: 400px;
    width: 20%;
    height: 100%;
    padding: 10px;
    position: fixed;
    display: inline-block;
}


/* Page Content */
#pageContentContainer {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

#pageContent {
  position: relative;
  width: 80%;
  left: 20%;
  background-color: #212121;
  display: inline-block;
}

如何在调整浏览器窗口大小时阻止Div移动

2 个答案: