html - 内容截断，不滚动(具体情况)-6ren

html - 内容截断，不滚动(具体情况)

转载作者：行者123 更新时间：2023-11-28 02:20:56

25

4

我遇到了一些问题，因为我的内容被截断(当窗口调整大小时)没有向下滚动的选项。我还使用了此处未包含的背景，但我认为即使使用黑色背景，我也会遇到同样的错误。我必须做什么才能允许在此处滚动？当使用“相对”功能放置我也在努力解决的内容时，我还将上传关于重叠内容的第二个问题。在这种情况下，我尝试在不使用 relative 的情况下构建页面，我的方法是一种“好”的方法吗？

注意:我两天前看了一个 YouTube 系列后才开始使用 html/css，所以请原谅我在这方面有多糟糕:)

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
	position: fixed;
	background: black;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: Open Sans;
	color: #FFFFFF;
}

h1 {
	margin: 0;
	padding: 0;
}

#aboutus {
	text-align: center;
	margin-top: 15%;
}

#imageback {
	content: "";
	display:block;
	position: fixed;
	top: 0;
	left: 0;
	background: url('../images/ariana.jpg');
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	opacity: 0.4;
	z-index: -2;
}

body div p {
	padding: 0;
	margin: 0;
}

.divcenter {
	text-align: justify;
	margin: 0 auto;
	width: 50%;
}















/*Some Fade Stuff (Can be shortened with Jquery)*/

.fadeImage {
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

<!doctype html>

<html lang="en">
	<head>
		<title>About Us</title>
		<link href="styles/main.css" rel="stylesheet" type="text/css"/>
		<meta charset="utf-8">

		<link href="about.html" rel="alternate" hreflang="en"/>
		<link href="about_pt.html" rel="alternate" hreflang="pt"/>
	</head>

	<body>
		<div id="imageback" class="fadeImage"></div>

		<header id="aboutus">
			<h1>About Us</h1>
		</header>

		<div class="divcenter">
			<p>
				this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text
			</p>
		</div>
	</body>

</html>

最佳答案

您需要从 css 中的 body 中删除 position: fixed;，您基本上不能在 position:fixed 元素上放置滚动条

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
	background: black;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: Open Sans;
	color: #FFFFFF;
}

h1 {
	margin: 0;
	padding: 0;
}

#aboutus {
	text-align: center;
	margin-top: 15%;
}

#imageback {
	content: "";
	display:block;
	position: fixed;
	top: 0;
	left: 0;
	background: url('../images/ariana.jpg');
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	opacity: 0.4;
	z-index: -2;
}

body div p {
	padding: 0;
	margin: 0;
}

.divcenter {
	text-align: justify;
	margin: 0 auto;
	width: 50%;
}















/*Some Fade Stuff (Can be shortened with Jquery)*/

.fadeImage {
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

<!doctype html>

<html lang="en">
	<head>
		<title>About Us</title>
		<link href="styles/main.css" rel="stylesheet" type="text/css"/>
		<meta charset="utf-8">

		<link href="about.html" rel="alternate" hreflang="en"/>
		<link href="about_pt.html" rel="alternate" hreflang="pt"/>
	</head>

	<body>
		<div id="imageback" class="fadeImage"></div>

		<header id="aboutus">
			<h1>About Us</h1>
		</header>

		<div class="divcenter">
			<p>
				this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text
			</p>
		</div>
	</body>

</html>

关于html - 内容截断，不滚动(具体情况)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48213385/

25

4

0

文章推荐： css - 无法将新脚本加入 parent 主题

文章推荐： html - 如何删除图像周围不需要的白色边框？

文章推荐： c++ - 将单例实例共享到共享库而不导出它

文章推荐： css - 响应式 CSS 点网格背景

sql - 查询以处理单个参数以及 "All"情况
我正在创建一个 sql server 存储过程，它将输入作为逗号分隔的 productid 或选项“全部”。当用户传入逗号分隔的产品 ID 时，查询应输出所有产品 ID 的数据。我使用“IN”语句执行
scala - 模式匹配中的大量嵌套匹配...情况
我有一个自动生成的 Web 服务客户端。我有很多复杂的类，我必须对其进行模式匹配。现在我的结构如下所示: val response = client.getResponse response matc
声明全局变量的 Javascript 情况？
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 7年前关闭。 Improve this
sql - TSQL where 情况
我需要正确的 tsql 语法来解决这个问题: Select * from table where var_A='10' select * from table where var_B='10' 何时使
c - 尝试读取结构元素时的 if 情况
我遇到了这个问题。每当我运行程序并在需要时键入字母 m 时，我的 if 语句都不会识别它。有人知道为什么吗？我已经这样做了一个小时，但没有结果。 #include #include #includ
php - 为表格的特定行赋予颜色。情况
我从数据库列名称“你有护照”创建了一个表，用户回答是或否我如何将 css 应用到这个动态工作的表。 table, th, td { border: 1px solid black;
android - onStatusChanged 情况
我对 LocationListener 类的 onStatusChanged 有一些疑问。它知道它可以呈现三种状态:AVAILABLE、TEMPORARILY_UNAVAILABLE 和 OUT_O
delphi - 您如何命名和组织您的异常(exception)情况？
当引入新的异常类型时，我总是不确定如何正确地做到这一点。有共同约定吗？你怎么做呢？我对您组织它们的范围感兴趣(将它们保留在它们所使用的单元中？在组件级别有一个单元？包级别？应用程序？) 这也会影响命
sql - 营业时间逻辑和营业时间的异常(exception)情况
我使用以下内容创建了日期维度: https://www.codeproject.com/Articles/647950/Create-and-Populate-Date-Dimension-for-D
javascript - 如何全面查询类(class)情况？
您好，我正在使用 Android 完全 Kiosk 浏览器，该浏览器使用 chrome Webview。但是 javascript 中的某些方法或函数无法正常工作，例如 window.print()。
c# - 我应该处理哪些异常(exception)情况
我有以下代码: public void OpenFile(string FileName) { if (FileName == null)
java - 比较数据的异常(exception)情况
获取索引越界异常 for (int recordData = 0; recordData < recordDataList.size(); recordData++) {
JSF 渲染弹出窗口出现 manegbean 情况？
我使用它在发生错误时在登录中显示一条消息: × Invalid user or password
java - 比较异常(exception)情况
这是我的场景，我有一个异常列表，其中包含来自不同层次结构的任意异常，下面的代码快照将解释我需要做什么 private List connectionExceptions; try { // tryin
java - JTextPane 动态缩进!!!情况
我尝试动态更新 Jtextpane 中的左缩进。但我不能!这是我尝试过的! DefaultStyledDocument document = (DefaultStyledDocument) textp
java - 异常(exception)情况
我不知道为什么这个异常不起作用...... import java.util.*; public class a { public static void main(String[] args
mysql - MySQL 中联接内的多个 When 情况
我目前在 case 中使用多个 when 时遇到问题。当我删除第二个当时，它就起作用了。这是什么问题？报告的MYSQL错误为: #1064 - You have an error in your S
mysql - SQL:使用单个查询计算不同的 where 情况
例如，我有一个表记录用户查看和下载文件的事件， file_id user activity 2 Tim view 1 Ron
c++ - 令人困惑的 C++ 情况
这是一个非常愚蠢的问题，但我需要一点安慰/帮助。我有当前的“递归”情况: void add( int value ) { // do something ... // if ( conditi
javascript - 如何摆脱javascript中的绑定(bind)情况
我尝试使用以下代码在按钮数组上注册回调。但我似乎无法理解如何绑定(bind)回调中需要的字符串。任何建议将不胜感激! for (var i = 0; i < this.car_types.length

首页

博学

6Ren·AI

商城

html - 内容截断，不滚动(具体情况)