- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在开发一个网站,其中正文使用 Materialise 网格分成两部分。网站左侧有一个不会改变的固定图像,右侧有用户可以上下滚动的内容。还有一个固定的导航栏和固定的页脚。这是 layout
向下滚动时,您可以在此处看到空白开始的位置 here
我希望右侧没有任何空白,只显示 div 内容。我通过检查工具查看了每个元素,没有看到额外的填充或边距。我想知道固定左侧是否在左侧底部添加像素?
这是我的 index.html `
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title> Sequel Seattle Apartments </title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">
<img class="mainlogo" src="logo_navy.png" alt="Sequel Apartments Seattle"/>
</a>
<ul class="bigbuttoncta right hide-on-med-and-down">
<li><a class="waves-effect waves-light btn">Apply Now</a></li>
<li><a class="waves-effect waves-light btn">Contact Us</a></li>
</ul>
<ul class="right hide-on-med-and-down">
<li><a href="#section1">Aparmtents</a></li>
<li><a href="#section2">Sequel Lifestyle</a></li>
<li><a href="#section3">Location</a></li>
<li><a href="#section4">Amenities</a></li>
<li><a href="#section5">Gallery</a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a href="#">Aparmtents</a></li>
<li><a href="#">Sequel Lifestyle</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Amenities</a></li>
<li><a href="#">Gallery</a></li> </ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
<!-- START OF CONTENT -->
<div id="allcontentfields" class="row">
<!-- Left Hand side of the screen, static content -->
<div class="col s5 leftsection">
<div id="index-banner" class="parallax-container">
<img src="background1.jpg" alt="Unsplashed background img 1">
</div>
</div>
<!-- Right hand side of the screen, all dynamic content -->
<div class="col s7 offset-s5 rightsection" >
<!-- SECTION 1 -->
<div class="section scrollspy" id="section1">
<div class="row">
<h1>Text goes here </h1>
</div>
</div>
<!-- SECTION 2 -->
<div class="section scrollspy" id="section2">
<div class="row">
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
<div class="parallax"><img src="background2.jpg" alt="Unsplashed background img 2"></div>
</div>
</div>
</div>
</div>
<!-- SECTION 3 -->
<div class="section scrollspy" id="section3">
<div class="row">
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 4 -->
<div class="section scrollspy" id="section4">
<div class="row">
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 5 -->
<div class="section scrollspy" id="section5">
<div class="row">
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER SECTION -->
<footer class="page-footer teal">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="brown-text text-lighten-3" href="http://herocreativemedia.com">Hero Creative Media, LLC</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>
`
这是 CSS,我使用的是 Materialize,所以他们也有一个 css 文件,但我没有弄乱它。
/* Custom Stylesheet */
/**
* Use this file to override Materialize files so you can update
* the core Materialize files in the future
*
* Made By MaterializeCSS.com
*/
html, body {
margin:0;
padding: 0;
}
nav ul a,
nav .brand-logo {
color: #444;
}
nav {
position: fixed;
width: 100%;
}
.col {
position:relative;
margin-top: 125px;
}
.row .col.s5 {
margin-left:0;
left:0;
right:0;
padding:0;
}
.row .col.offset-s5 {
padding:0;
height: auto;
}
.leftsection {
position: fixed;
z-index: -1;
margin-top: 200px;
padding:0;
overflow:hidden;
padding-left: 0;
padding-right: 0;
}
.rightsection {
position: relative;
z-index: -1;
margin-top: 200px;
padding:0;
overflow: hidden;
height: auto;
}
#section1 {
position:relative;
height: 700px;
width: 100%;
background-color:red;
overflow-y: scroll;
padding:0;
}
#section2 {
position:relative;
height: 700px;
width: 100%;
padding: 0;
overflow-y: scroll;
}
#section3 {
position:relative;
height: 700px;
width: 100%;
padding:0;
background-color:blue;
z-index: -1;
overflow-y: scroll;
}
#section4 {
position:relative;
height: 700px;
width: 100%;
padding:0;
background-color:yellow;
z-index: -1;
overflow-y: scroll;
}
#section5 {
position:relative;
height: 700px;
width: 100%;
padding:0;
background-color:orange;
z-index: -1;
overflow-y: scroll;
padding-bottom: 0;
}
.mainlogo {
width: 100%;
margin-left: -50px;
margin-top: 40px;
}
.bigbuttoncta {
margin-top: 10px;
}
.bigbuttoncta li {
margin: 20px;
}
p {
line-height: 2rem;
}
.button-collapse {
color: #26a69a;
}
.parallax-container {
min-height: 780px;
line-height: 0;
height: auto;
color: rgba(255,255,255,.9);
z-index: -1;
}
.parallax-container .section {
width: 100%;
}
@media only screen and (max-width : 992px) {
.parallax-container .section {
position: absolute;
top: 40%;
}
#index-banner .section {
top: 10%;
}
}
@media only screen and (max-width : 600px) {
#index-banner .section {
top: 0;
}
}
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
footer.page-footer {
margin-top: 100%;
display:block;
}
最佳答案
我刚刚发现这是我的 footer.page-footer 的边距顶部设置为 100%,因此实际上创建了一个巨大的滚动条,它显示在屏幕的一半上,因为另一半是固定的。我删除了它,我已经准备好了。
self 注意....删除您在尝试解决问题时输入的愚蠢 CSS。
关于html - 分屏设计布局,一半可滚动内容有巨大的留白区域,无法去除留白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35735925/
在使用 GDI 进行图形处理的传统 Windows 程序中,您必须担心只绘制需要重绘的窗口区域;这是“更新矩形”,可以通过 PAINTSTRUCT.rcPaint 或通过调用 GetUpdateRec
我对 TFS 中的所有内容感到困惑。有人可以解释一下所有这些是如何组合在一起的吗? 团队项目合集 团队项目 团队 地区 迭代 来自 this page,我认为一个(团队)项目集合可以包含多个(团队)项
这对我来说根本没有意义。创建新的 API 网关时,您可以指定它是区域优化的还是边缘优化的。但话又说回来,当您为 API Gateway 创建自定义域名时,您可以在两者之间进行选择。 最糟糕的是,您可以
我有一个工作表,其中包含我想循环遍历的许多不同区域。我将进行一些计算,并认为它比在列中逐个单元格地更快/更有效。 我尝试了一些不同的东西,但不知道如何跳到下一个区域。我已经发表了一些评论,最有希望的是
最近迁移到 TFS 2010 后,我想知道对于区域而言,最佳或最广泛接受的定义或配置是什么? 我能在网上找到的唯一有用的文章是 this one并且是我认为是正确的。然而,这让我开始思考是否以下任何一
我在“北欧”有一个存储帐户,现在我想使用生命周期管理将冷 blob 移动到存档层。 但是我每次尝试都会遇到以下失败:无法为存储帐户“myStorageAccount”添加生命周期管理规则。错误:管理策
我正在开发一个项目,您在扫描仪中输入州的缩写,然后程序会告诉您该州位于美国的哪个地区。我认为我的大部分代码都是正确的,但我有以前从未使用过 switch。 我已经将我的工作改进为一个错误,即我的第一个
我正在尝试学习 AngularJS,我想我有一个架构问题。 如果我想开始开发一个应用程序,比方说,比如 youtube,我如何在“区域”(比如 Marionette)中组织页面?我的意思是:顶部导航栏
我正在制作一个动态内存分配器,当我释放其中的一部分时,我需要检查我传递给函数的指针实际上是否在该区域内。我有一个指向 malloc 区域开头的指针 typedef unsigned char byte
有时我想看看 到底在哪里页面上图片上的标签。 在 Javascript 中有没有办法改变颜色或隐藏与区域标签对应的图像部分? 最佳答案 也许您正在寻找类似 mapper.js 的内容.它允许您在鼠标
我有一个使用 D3 js 创建的时间序列图表。我想为特定时间间隔添加高亮区域,以显示在该特定时间发生的特定事件(会有不同类型的事件,因此每个高亮标记将根据其类型具有不同的颜色)。我希望这个突出显示区域
我正在尝试创建网站的密码保护区。我想通过检查 MySql 表中的用户名和密码来允许访问,然后启动一个 session 并允许在 session 处于事件状态时访问多个页面。如果有人尝试直接访问这些页面
在 ScrollView 中我添加了几个按钮。正如您在图片中看到的,2 个按钮完全可见,第三个按钮半可见。当我向右滚动看到第三个时;1-如果滚动条很短,则它会滚动回到第一个位置。2- 如果滚动足够则显
我正在开发我的第一个 spritekit 应用程序,并且有一个关于如何处理我想到的事情的快速问题。我正在制作一个我想要的棋盘游戏原型(prototype),并希望在 iOS map 中进行一些集思广益
在我的 C# 程序中,我收到这样的日期和时间:DateTime.Now 我得到:19/09/2010 20:10:30 因为我的地区是:希伯来语(以色列) 但是如果我将我的程序安装在区域为 Engli
有时我在 Visual Studio 的源文件中运行(在我的例子中是 2010),我看到很多区域,我必须点击 + 号才能一个一个地打开它们! 是否有任何快捷方式或菜单选项可以使这对我来说更容易,并且对
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 7 年前。 Improve
我正在寻找二维数据中的峰值区域(如果您愿意,灰度图像或二维景观,通过霍夫变换创建)。 峰值区域是指局部最大峰值,但不是单个点而是周围的一部分strong>contributing region 随之而
我希望能够将任何字符或字符串转换为形状或区域,以便我可以按照我喜欢的任何大小、样式、效果等来绘制该字符。 更具体地说,我将使用视差绘制它,以便它仅在特定角度清晰定义(这就是为什么我不能使用 html
我非常喜欢数学(或者你们大多数人会说的“数学”!),但我还没有达到知道这个问题答案的程度。我有一个主圆,它可以在显示器上的任何 x 和 y 处有一个中心点。其他圆圈将随意在显示器周围移动,但在任何给定
我是一名优秀的程序员,十分优秀!