首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

为什么MaterializeCSS会限制视口？

作者：手机用户2502938985 | 来源：互联网 | 2023-06-13 20:18
我正在使用MaterializeCSS库通过

我正在使用MaterializeCSS库通过Firebase构建网络应用。到目前为止，一切都进行得很顺利。视口仅占据仪表板中屏幕的一半-它会切断一半的内容！

为什么MaterializeCSS会限制视口？

我还添加了一个FAB（浮动操作按钮），其位置为absolute和bottom:0;right:0;，但它仍漂浮在页面的一半以下！

为什么MaterializeCSS会限制视口？

真的很感谢您的帮助，因为它会减慢此项目的后端开发速度。

这是我的代码：























Profile Picture
add


This is how other people will see you,whether they are members or group leaders.









[Group editor here]



// When user signs in
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in
var email = user.email;
var emailVerified = user.emailVerified;
// Display email under right tab
document.getElementById("emailDisplay").innerHTML = "Hi," + user.email + ".";
// Display email in sidebar
document.getElementById("sidebar-email").innerHTML = user.email;
// Display profile picture
document.getElementById("profileImageCurrent").innerHTML = "";
// Set version to the client version defined above
document.getElementById("version").innerHTML = "You're running version " + clientVersion;
// Get user data from Firestore
var docRef = db.collection("users").doc(user.email);
docRef.get().then(function(doc) {
if (doc.exists) {
var userChurch = JSON.stringify(doc.data());
userChurch = JSON.parse(userChurch);
userChurch = userChurch["church"];
db.collection("churches").where("literalName","==",userChurch)
.get()
.then(function(querysnapshot) {
querysnapshot.forEach(function(doc) {
// doc.data() is never undefined for query doc snapshots
var literalChurch = doc.data();
literalChurch = JSON.stringify(literalChurch);
literalChurch = JSON.parse(literalChurch);
console.log(literalChurch["literalName"]);
document.getElementById("churchName").innerHTML = literalChurch["literalName"];
});
})
.catch(function(error) {
console.log("Error getting documents: ",error);
});
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:",error);
});
} else {
// User isn't logged in
window.location.replace("index.html");
}
});
// Log out user
function userLogOut() {
firebase.auth().signOut().then(function() {
window.location.replace("index.html")
}).catch(function(error) {
// If there's somehow an error logging out
window.location.replace("error.html");
});
}
function addMember() {
console.log("Feature has not yet been implemented.");
M.toast({html: 'This feature has not yet been implemented!'})
}
// the css
nav {
padding-left: 20px;
padding-right: 20px;
}
nav i {
color: #ffffff;
}
.email {
font-size: 20px;
}
.s12 {
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
}
.version {
font-size: 20px;
}
.tabs .indicator {
background-color: #039be5 !important;
}
.tabs .active {
background-color: #039be5;
}
.fixed-action-btn {
position: absolute !important;
bottom: 0;
right: 0;
}
.membersEditor {
height: 100%;
}
.addphoto {
color: white;
padding: 0px;
width: 100%;
}
#accountInfo {
height: 100% !important;
}



推荐阅读
  • list

    Nginx使用（server参数配置）

    Nginx使用（server参数配置）
    本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]
  • list

    拥抱Android Design Support Library新变化（导航视图、悬浮ActionBar）

    拥抱Android Design Support Library新变化（导航视图、悬浮ActionBar）
    转载请注明明桑AndroidAndroid5.0Loollipop作为Android最重要的版本之一，为我们带来了全新的界面风格和设计语言。看起来很受欢迎࿰ ... [详细]
  • java

    自动轮播，反转播放的ViewPagerAdapter的使用方法和效果展示

    自动轮播，反转播放的ViewPagerAdapter的使用方法和效果展示
    本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter，并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]
  • java

    猜字母游戏

    猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • version

    Support Paged.JS for automatic hugo resume> PDF conversion.

    FeatureRequestIsyourfeaturerequestrelatedtoaproblem?Please ... [详细]
  • version

    Android开发实现的计时器功能示例

    Android开发实现的计时器功能示例
    本文分享了Android开发实现的计时器功能示例，包括效果图、布局和按钮的使用。通过使用Chronometer控件，可以实现计时器功能。该示例适用于Android平台，供开发者参考。 ... [详细]
  • java

    mongodb数据迁移,程序员未来职场之路

    一面自我介绍对象相等的判断，equals方法实现。可以简单描述挫折，并说明自己如何克服，最终有哪些收获。职业规划表明自己决心，首先自己不准备继续求学了，必须招工作了。希望去哪 ... [详细]
  • window

    vue使用

    vue使用
    关键词： ... [详细]
  • java

    OC学习笔记之@property和@synthesize

    本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • cmd

    WinPythonHadoop在Win10上安装教程

    本文介绍了在Win10上安装WinPythonHadoop的详细步骤，包括安装Python环境、安装JDK8、安装pyspark、安装Hadoop和Spark、设置环境变量、下载winutils.exe等。同时提醒注意Hadoop版本与pyspark版本的一致性，并建议重启电脑以确保安装成功。 ... [详细]
  • java

    Spring特性实现接口多类的动态调用详解

    Spring特性实现接口多类的动态调用详解
    本文详细介绍了如何使用Spring特性实现接口多类的动态调用。通过对Spring IoC容器的基础类BeanFactory和ApplicationContext的介绍，以及getBeansOfType方法的应用，解决了在实际工作中遇到的接口及多个实现类的问题。同时，文章还提到了SPI使用的不便之处，并介绍了借助ApplicationContext实现需求的方法。阅读本文，你将了解到Spring特性的实现原理和实际应用方式。 ... [详细]
  • list

    关于cuowu类的错误提示和使用AdjustmentListener的问题

    本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]
  • java

    java 线程死锁模拟

    1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]
  • jsp

    后台获取视图对应的字符串

    后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]
  • java

    如何通过全新应用内评价获取更多优质用户反馈？

    Google Play推出全新的应用内评价API，帮助开发者获取更多优质用户反馈。用户每天在Google Play上发表数百万条评论，这有助于开发者了解用户喜好和改进需求。开发者可以选择在适当的时间请求用户撰写评论，以获得全面而有用的反馈。全新应用内评价功能让用户无需返回应用详情页面即可发表评论，提升用户体验。 ... [详细]
author-avatar
手机用户2502938985
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有