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

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

转载作者：行者123 更新时间：2023-11-28 03:15:10

29

4

我的网站内容有一个侧边栏和一个区域。侧边栏是固定的，但是页面内容可以滚动。然而，当浏览器窗口调整大小时，页面内容 div 被推到左边，因为它被设置为向右浮动，我希望它永远不会比现在更靠左(目前它会慢慢隐藏在下面边栏内容)。您可以在下面的屏幕截图中看到发生了什么:

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

我怎样才能让页面内容调整大小、居中并且永远不会超过侧边栏所在的位置，因为目前图像和它下面的文本将隐藏在侧边栏下面，而是希望它根据侧边栏调整大小。我的代码如下。

/* 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;
}

<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>
    </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>

非常感谢任何帮助!这可能是我错过某个地方的简单事情？谢谢!

最佳答案

因为您的侧边栏是 position: fixed，所以它脱离了布局的常规流程， float 将不会按照您期望的方式工作。尝试在 #pageContent div 上设置 400px 的左边距。见下文。

/* 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;
}

<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>

关于html - 如何在调整浏览器窗口大小时阻止 Div 移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45510317/

29

4

0

文章推荐： c++ - 信号、槽和其他类

文章推荐： html - 将元素固定到背景大小为 : cover 的 div

文章推荐： c++ - 内存复制导致偏移

文章推荐： javascript - 如何在angularJs中使用数据列表

r - 如何将可扩展时间数据作为 r ggplot 包中的一个因素呈现？ (即 1 小时、5 小时、10 小时)
我有 0 小时、3 小时、12 小时、24 小时、48 小时的数据组……我想绘制这些数据的图表，以便保留时间的比例。 runs <- c(1:25) hours <- as.factor(c(0, 3
swift - 如何计算从选定时间(小时)到给定持续时间的时间(小时)
例如，如果我选择了时间:下午 3 点和小时数:5 小时，则得到 (8pm) 作为答案“ 最佳答案 let calendar = Calendar.current let date = calendar
php - 两个相同的日期时间；一个显示 12 小时，另一个显示 24 小时
我有一个包含两个日期时间字段的表单。用户输入日期 (yyyy-mm-dd) 和时间(3 个框；小时、分钟、上午/下午)。出于某种原因，第一个没有保存为 24 小时制。以下数据为输入结果: 2011
javascript - 使用导出单位进行计算(例如 1 小时 * 1 英里/小时)
我一直在尝试使用导出单位进行计算，但到目前为止我还没有取得任何成果。我已经尝试过mathjs ，但如果我输入 1 小时 * 1 英里/小时，我会得到 UnsupportedTypeError: Fu
ubuntu - 每 3 小时 cron 作业和每 3+1 小时 cron 作业
我有两组要运行的 cronjob。第一个应该每 3 小时运行一次，第二个也应该每 3 小时运行一次，但比第一组晚一个小时。什么是正确的语法？ // every 3 hours 17 */3 * *
amazon-web-services - EC2 预留实例 - 24 个实例运行 1 小时(同一小时)是否等于 1 个实例运行 24 小时？
我知道 AWS 中的预留实例更多的是计费而不是实际实例——它们没有附加到实际实例——我想知道: 如果我在特定区域和可用区中购买特定时间的预留实例 - 如果我每天 24 小时使用单个实例与运行 24 个
r - 时间顺序(小时)
我试过: seq( from=as.POSIXct("2012-1-1 0", tz="UTC"), to=as.POSIXct("2012-1-3 23", tz="UTC"),
sql - SQL按日期分组(小时)
我有一个带有“日期”列的表。我想按小时分组指定日期。最佳答案 Select TO_CHAR(date,'HH24') from table where date = TO_DATE('2011022
sql - 小时、月份等的开始
我知道如何在 SQL (SQL Server) 中获取当前日期，但要获取当天的开始时间: select dateadd(DAY, datediff(day, 0, getdate()),0) (res
游戏结束后快速倒计时 + 1 小时
我正在尝试在游戏之间创建一个计时器，以便用户在失去生命后必须等待 5 分钟才能再次玩游戏。但是我不确定最好的方法是什么。我还需要它来防止用户在“设置”中编辑他们的时间。实现这一目标的最佳方法是什么
MySQL - 小时(日期时间)
我的查询有误。该错误显示预期的已知函数，得到“HOUR”。如果我删除这部分，查询将正常工作 (AND HOUR({$nowDate}) = 11) SELECT c FROM ProConvocati
javascript - 从javascript中的字符串中获取差异(小时)
var d1 = new Date(); var d2 = new Date(); d2.setHours(d1.getHours() +01); alert(d2); 这部分没问题。现在我试图在 (
ios - 为什么时间不自动更改为最新的分钟/小时？
我正在构建一个用于练习的基本时钟应用程序，但出于某种原因，时间不会自动更改为最新的分钟或小时。例如，当前时间是 17:56，但它显示的是 17:54，这是我打开应用程序的最后时间。 NSDate *n
html - 部分下划线(小时)
我创建了一张图片，我想将其用作页面的 hr。当它被上传时，它一直向左对齐。我希望它居中，在标题下。这是我的 CSS 代码: .section-underline { height: 35px
javascript - 如何使用毫秒计算超过一秒/小时？
这个问题已经有答案了: Getting difference in seconds from two dates in JavaScript (2 个回答) 已关闭 4 年前。我想计算两个具有不同格
php - 显示特定时间之前的天/小时
我需要计算到某个日期/时间的剩余时间(天/小时)。但是，我没有使用静态日期。假设我在每个星期日的 17:00 有一个事件。我需要显示到下一个事件的剩余时间，即即将到来的星期日 17:00。我
MySQL - -838 小时？
我正在执行这个脚本: SELECT EXTRACT(HOUR FROM TIMEDIFF('2009-12-12 13:13:13', NOW())); 我得到:-838。这是提取时 MySQL 可以
javascript 小时:分钟的正则表达式
复制代码代码如下: /** * 小时:分钟的正则表达式检查<br> * <br> * @param pInput 要检查的字符串 * @return boolean 返
WiFi名称个性好听沙雕连wifi5元/小时
连wifi5元/小时独领风骚朕好帅今晚你是我的人十里桃花高端定制厕所VP专用一只老母猪在家好无聊你爹的wifi 密码是叫爸爸全拼关晓彤和鹿晗分手了吗蹭了我的
python - 如何将以天、小时、分钟和秒为单位的时间转换为仅以秒为单位
我有以下数据框列: 我需要将 csv 列中的对象字符串数据转换为总秒数。示例:10m -> 600s 我试过这段代码: df.duration = str(datetime.timedelta(df

首页

博学

6Ren·AI

商城

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