javascript - vue 应用在媒体查询时不会增长到 100% 的高度
问题描述
大家好,我在几个页面上使用我的 vue 路由器,页面上的主容器不会使用这个媒体查询将高度设置为 100%
@media screen and (min-width: 700px) {
#signinContainer {
height: 100%;
}
#signinContainer {
height: 520px;
}
#mainContainer{
height: 100%;
}
}
我已经尝试将路由器组件以及应用程序本身设置为 100% 高度,但这不起作用,我想避免仅将其设置为 700px,因为我希望它根据需要动态增长和缩小
希望有人能看到我做错了什么。我之前在宽度方面遇到了同样的问题,并且更改视图中的 div 宽度修复了它,但到目前为止我尝试过的高度并非如此
这是问题的图片
这是我的组件
<template>
<div id="mainContainer">
<div class="topContainer">
<img src="../assets/svg/logo_big.svg" height="45px" width="110" alt="flyex logo">
<section>
<h6 id="signup" @click="signupRoute">Sign Up</h6>
<h6 id="language">English <small id="dropDownArrow">▼</small></h6>
</section>
</div>
<div id="signinContainer">
<form @submit.prevent="handleSubmit">
<h4>Sign In</h4>
<input type="email" v-model="email" placeholder=" Email" />
<input type="password" v-model="password" placeholder=" Password" />
<div id="formButton">
<button>Sign In</button>
</div>
</form>
<h6>OR</h6>
<div id="socials">
<img src="../assets/general/ic-social@2x.png" height="50px" width="50" alt="facebook">
<img src="../assets/general/ic-social-1@2x.png" height="50px" width="50" alt="google">
<img src="../assets/general/ic-social-2@2x.png" height="50px" width="50" alt="twitter">
</div>
<div class="links">
<a signupRoute>CREATE ACCOUNT?</a>
<a>NEED HELP?</a>
</div>
</div>
</div>
</template>
<style scoped>
#mainContainer{
font-family: 'Noto Sans JP', sans-serif;
background-image: linear-gradient(#2C93EF, #389EF9);
width: 100%;
height: 100%;
padding: 2em;
}
.topContainer{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 1em 0 1em 0;
}
section{
display:flex;
}
section h6{
color: white;
}
#signinContainer{
display: block;
margin: 0 auto;
margin-bottom: .5em;
justify-content: center;
border-radius: 8px;
width: 28%;
height: 470px;
background-color: white;
box-shadow: 0 1px 2px #888888fa;
}
#signup:hover{
cursor:pointer;
}
#language{
padding-left:1.5em;
color: white;
}
#dropDownArrow{
color: white;
}
h4{
font-size: 27px;
padding-bottom: 1.5em;
}
h6{
font-size: 16px;
color:rgba(128, 128, 128, 0.39);
}
form{
padding-top: 10%;
display: block;
justify-content: center;
width: 100%;
margin-bottom: 1.5em;
}
input{
margin: .5em;
height: 35px;
width: 80%;
border-radius: 5px;
border: .5px solid rgba(128, 128, 128, 0.199);
}
::placeholder {
color:rgba(128, 128, 128, 0.445);
}
#formButton{
width: 100%;
}
button{
margin-top: 1.5em;
background-color:rgb(71, 174, 243);
color: white;
border: none;
border-radius: 10px;
height: 40px;
width: 80%;
}
button:hover{
background-color: #389EF9;
}
#socials{
margin-bottom: 1em;
}
#socials img{
margin: 1em;
}
.links{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
font-size: 12px;
color:rgb(71, 174, 243)
}
.links a{
margin: 1.5em;
}
.links a:hover{
cursor: pointer;
}
// change height of main container to be 100% of the screen and set the sign in container to a larger size
@media screen and (min-width: 700px) {
#signinContainer {
height: 100%;
}
#signinContainer {
height: 520px;
}
#mainContainer{
height: 100%;
}
}
</style>
这是我渲染组件的视图
<template>
<div>
<Signin/>
</div>
</template>
<script>
// @ is an alias to /src
import Signin from '@/components/Signin.vue'
export default {
name: 'signin',
components: {
Signin
}
}
</script>
<style scoped>
div{
width: 100%;
height: 100%;
}
</style>
这是我的应用程序文件,我有主路由器
<template>
<div id="app">
<router-view id="router"/>
</div>
</template>
<style lang="scss" scoped>
@import '../sass/main.scss';
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 100%
}
#router{
z-index: 0;
width: 100%;
height: 100%;
}
#nav {
padding: 30px;
}
#app div{
width: 100%;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
解决方案
尝试在视口高度 (vh)中设置高度。该单位基于视口的高度。1vh 的值等于视口高度的 1%:
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
height: 100vh;
}
推荐阅读
- javascript - 向菜单项添加类而不改变样式
- salesforce - 将 Salesforce Einstein 聊天机器人集成到使用 Dot Net 和 Angular 构建的网站中
- elasticsearch - Elasticsearch基于公共字段合并多个索引
- macos - 无法编译库,运行 make 时找不到符号
- python - python中结合线性和非线性回归
- bash - 在直线中将 hql 输出导出到 csv
- c# - 如何在 C# 中将 byteArray 转换为二进制值?
- javascript - Webpack - HTML 加载器不扫描所有文件
- html - 网站上的 srcset= 字符串是 https 链接,但是当我使用 selenium 的 driver.find('img')['srcset'] 时,它给了我 base64 字符串
- python - Beautifulsoup4 导入错误