html - 当我的宽度设置为 100% 时，为什么我的网站会横向滚动？-6ren

html - 当我的宽度设置为 100% 时，为什么我的网站会横向滚动？

转载作者：太空宇宙更新时间：2023-11-03 20:28:25

26

4

所以我的网站出于某种原因横向或水平滚动。看起来是页脚造成的，但我只是想不通这里的问题是什么？我认为这可能与页脚中的社交图标有关，但我不太确定。一些指导表示赞赏

我的网站在这里:
https://jgofficial1.000webhostapp.com/index.html

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JG.OFFICAL</title>
<link rel="stylesheet" href="style.css">
<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>

<body>
    <header>
        <div class= "logo">
            <!--h1>JG.OFFICIAL</h1-->
            <img src= "../images/logo.png" alt= "Hello" height ="60px" width ="310px">
        </div>       
        <nav> 
        <ul>
            <li><a href= "index.html">HOME</a></li>
            <li><a href= "work.html">WORK</a></li>
            <li><a href= "contact.html">CONTACT</a></li>
            <li><a href= "about.html">ABOUT</a></li>
        </ul>
        </nav> 
    </header>
    <br><br>
    <div id= "scroll1">
        <img src= "../images/scrollbutton.png" alt= "Click to scroll" height = "50" width = "50">
    </div>
    <div id= "img-wrapper">
        <img src= "../images/helloscreen.png" alt= "Hello" height= "870" width= "1228">
    </div>

    <div id= "text-wrapper2">
        <div id= "text">
            <p>Design is always in our lives, whether we like it or not.</p>
        </div>
    </div>

    <footer>
        <div class= "social-icons">
            <img src= "../images/fb-icon.png" alt= "Facebook" height= "45" weight= "45">
            <img src= "../images/yt-icon.png" alt= "YouTube" height= "45" weight= "45">
            <img src= "../images/instagram-icon.png" alt= "Instagram" height= "45" weight= "45">
            <img src= "../images/twitter-icon.png" alt= "Twitter" height= "45" weight= "45">
        </div>
    </footer>

</body>
</html>

CSS

header {
background-color: rgba(0,0,0,0.0);
height: 60px;
width: 100%;
margin-top: 0px;
}

.logo {
color: white;
font-family: 'Montserrat', sans-serif;
margin-left: 10px;
padding-bottom: 10px;
float: left;
width: 70px;
}

body {
background-image: url("../images/background1.png");
background-size: cover;
margin: 0;
}

nav {
float: right;
margin-right: 10px;
background-color: rgba(0,0,0,0.0);
}

nav ul {
list-style-type: none;
font-family: 'Oswald', sans-serif;
overflow: hidden;
margin-top: 0;
padding-top: 15px;
}

nav li {
display: inline;
padding-right: 30px;
}

nav li a {
color: white;
text-align: center;
text-decoration: none;
}

#scroll1 {
text-align: center;
margin-top: 200px;
}

#img-wrapper {
text-align: center;
margin: 0 auto;
}

#text-wrapper img {
width: 100%;
height: auto;
}

#text-wrapper2 {
background-color: rgba(0,0,0,0.4);
margin-bottom: 10px;
height: 400px;
width: 100%;
}

#scroll1 {
text-align: center;
}

#text p {
color: white;
font-family: 'Oswald', sans-serif;
padding-top: 15px;
padding-left: 15px;
} 

footer {
background-color: rgba(0,0,0,0.3);
height: 60px;
width: 100%;
padding-left: 20px;
padding-top: 8px;
}

.social-icons {
width: 100%;
}

最佳答案

现在有两个原因。

图像的宽度为 1228px
页脚的宽度为 100% + 20px padding

两者都将内容推送到 100% 宽度。要修复它，您可以添加如下内容:

#img-wrapper img {
    max-width: 100%;
}

footer {
    box-sizing: border-box;
}

您不希望这种情况再次发生吗？更全面地设置这些属性，它们可能会对您有所帮助。因此，您可以在 CSS 之上添加

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

为什么要使用box-sizing: border-box;？

The width and height properties include the content, the padding and border, but not the margin.

发件人:https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

关于html - 当我的宽度设置为 100% 时，为什么我的网站会横向滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48247556/

26

4

0

文章推荐： c# - LINQ to Entities 外键关联

文章推荐： python - 在Python中查找扩展名为.txt的目录中的所有文件

文章推荐： C# ToolStrip 标签有时会先打印最后一个字符

文章推荐： python - pandas.DataFrame.explode 产生太多行

javascript - 阻止 body 滚动，但阻止触摸设备上的任何父 div 滚动
如果附加了 'not-scroll' 类，我希望我的 body 不滚动，否则它应该正常工作。我已经搜索这个问题两天了，但找不到任何适合我的解决方案。我想要的是向 body 添加一个 class，并
iOS Safari - 滚动 iFrame 导致下面的 div 滚动
我发现似乎是 iOS Safari 中的错误(我正在 iOS 8 上进行测试)。当绝对定位的 iFrame 漂浮在一段可滚动内容上方时，滚动 iFrame 也会滚动下面的内容。以下 HTML (ava
javascript - 如何启用 Safari 滚动 SVG(滚动 div 中的对象标签)？
我有以下代码来显示一系列投资组合图片，这些图片以 SVG 格式存储在滚动 div 中: 在 Safari 中滚动使用两根手指或鼠标滚轮当光标位于 SVG 之一上时不起作用。该页
Javascript 滚动
我想用 javascript 做的是: 一旦你向下滚动页面，将#sidebar-box-fixed 的位置从 position: relative; 更改为定位:固定；。改回position:rela
Elasticsearch 滚动
我对 Elasticsearch 的滚动功能有点困惑。在 elasticsearch 中，每当用户在结果集上滚动时，是否可以每次调用搜索 API？来自文档 "search_type" => "scan
Javascript 滚动
我试图做到这一点，以便当我向上或向下滚动页面时，它会运行不同的相应功能。我发现了一个类似的问题here但我已经尝试了他们的答案并且没有运气。注意:此页面没有正常显示的滚动条。没有地方可以滚动。 bo
gtk - 滚动 GtkDrawingArea
(C语言，GTK库) 在我的表单上，我有一个 GtkDrawingArea 小部件，我在上面使用 Cairo 绘制 GdkPixbufs(从文件加载)。我想要完成的是能够在窗口大小保持固定的情况下使用
SwiftUI 滚动/列表滚动事件
最近我一直在尝试创建一个拉到(刷新，加载更多)swiftUI ScrollView !!，灵感来自 https://cocoapods.org/pods/SwiftPullToRefresh 我正在努
jquery - 拖放 + 滚动
我正在开发一个应用程序，其中有两个带有可放置区域的列表和一个带有可拖动项目的侧面菜单。当我滚动屏幕时，项目的位置困惑。我试图在谷歌上寻找一些东西，最后得到了这个问题:jQuery draggabl
iphone - UIWebView 滚动
我在 UIWebView 中加载了一个 HTML 表单，而我的 UIWebView 恰好从 View 的中间开始并扩展。我必须锁定此 webView 不滚动并将其放在 ScrollView 之上以允许
javascript - 每个元素上的淡入淡出 - 滚动
如何在每个元素而不是整个元素上应用淡入淡出(与其高度相比)？ HTML: CSS: * { padding: 0; margin: 0; box-sizing: border
flutter - 滚动 PageView
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。有什么办法吗？我想保留属性 pageSnapping:
java - JTextField 滚动
我制作这个程序是为了好玩，但我被卡住了，因为程序在屏幕外运行。如何在不完全更改代码的情况下实现滚动条。 public static void main(String args[]) throws IO
flutter - 滚动 PageView
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。有什么办法吗？我想保留属性 pageSnapping:
java - 滚动()和添加()
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
jquery - 滚动/跟随侧边栏帮助
使用 jquery 技术从 css-tricks.com 获得滚动/跟随侧边栏，如果您不知道我在说什么，这里是代码: $(function() { var $sidebar = $
Jquery-手机滑动菜单面板+滚动
我是 jQuery Mobile 新手。我需要向我的应用程序添加 Facebook 滑动面板功能。我经历了 sliding menu panel ，它工作正常，但我在菜单面板中的内容超出了窗口大小，
javascript - 如何在js或jQuery中检测ctrl +滚动？
有没有办法在 js 或 jQuery 或任何其他工具中检测 ctrl + 滚动。我正在尝试执行一些动态布局代码，我需要检测不同分辨率下的屏幕宽度，我通过使用 setTimeout() 的计时器实现了这
jquery 滚动 + 可拖动项目
我有一部分html代码:
c# - 滚动 RichTextBox
我想控制 RichTextBox 滚动，但在控件中找不到任何方法来执行此操作。这样做的原因是我希望当鼠标光标位于 RichTextBox 控件上时鼠标滚轮滚动有效(它没有事件焦点:鼠标滚轮事件由表单

首页

博学

6Ren·AI

商城

html - 当我的宽度设置为 100% 时，为什么我的网站会横向滚动？