我目前正在对移动设备上的网站进行大修。我在配置首页上的移动屏幕可点击DIV框时遇到了问题。这是指向我的网站的链接:https://www.thefloodplains.com/
我希望在查看移动网站的首页时显示相同的可单击DIV框-但需要说明的是,我只希望其中两个填充移动屏幕的空间(一个在上半部分,另一个在屏幕的下半部分。)
这是我的移动网站当前首页的外观:
如您所见,底部的DIV并不能一直沿页面向下移动。我希望两个DIV具有相同的面积,其中一个占据移动屏幕的上半部分,而另一个占据底部。
最终,我希望移动目标网页看起来像这样:
以下是首页的CSS / HTML:
如您所见,我正在专门为移动设备使用“ .col-md-5”。我尝试了多种方法,包括将高度更改为50%(如上所示),但这似乎只能使手机的上半部高度达到50%。
body {
margin: 0;
z-index: 1;
width: 100%;
/* min-height: 850px; */
max-width: 100%;
background-attachment: fixed;
/* background-repeat: repeat-x; */
background: white;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
background: url(OceanWater.jpg);
background-attachment: fixed;
}
h1 {
font-size: 36px;
font-style: bold;
text-align: center;
font-family: 'Montserrat', 'Buernard', Garamond, "Buenard", "EB Garamond", 'EB Garamond';
}
h3 {
font-size: 36px;
font-style: bold;
text-align: center;
font-family: 'Montserrat', 'Buernard', Garamond, "Buenard", "EB Garamond", 'EB Garamond';
}
img {
max-width: 100%;
max-height: 100%;
}
#div1 {
background-image: url('AboutIcon.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div2 {
background-image: url('ArticlesIcon.png');
background-position: center center; //center the image in the div
background-size: contain; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div3 {
background-image: url('CodingBrackets2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div4 {
background-image: url('ContactIcon.png');
background-position: center center; //center the image in the div
background-size: contain; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div5 {
background-image: url('FSMusicArt.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div6 {
background-image: url('AudioProduction4.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div7 {
background-image: url('Violin3.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div8 {
background-image: url('GalleryImage2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div9 {
background-image: url('Handshake2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
div {
background-image: url(../images/please-dont-use-spaces.jpg); //add the background image
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
}
/* @media only screen and (max-width: 600px) {
.mobileShow {display: inline;}
.mobileHide {display: none;}
} */
@media (min-width: 601px) {
.desktop-only {
display: block !important;
}
}
@media (max-width: 600px) {
.mobile-only {
display: block !important;
}
.desktop-only {
display: none !important;
}
}
@media only screen and (max-width: 479px) {
.mobile-hide {
display: block !important;
}
}
@media only screen and (max-width: 479px) {
.mobile-hide {
display: none !important;
}
}
@media only screen and (min-width: 480px) {
.desktop-hide {
display: block !important;
}
}
@media only screen and (min-width: 480px) {
.desktop-hide {
display: none !important;
}
}
@-ms-viewport {
width: device-width;
}
@import 'https://fonts.googleapis.com/css?family=Buenard|EB+Garamond|Lora|Roboto';
/* Original
-------------------------------------------------------------- */
.col-md-5 {
color: #0081A5;
height: 50%;
}
.col-md-5:hover {
background-color: #FFE097;
}
.col-md-5 h3 {
position: relative;
transform: translateY(-50%);
}
.col-md-4 {
color: #0081A5;
height: 300px;
border: 1px solid #F97B62;
position: relative;
}
.col-md-4:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.col-md-4:hover:after {
opacity: .5;
}
.col-md-4 h3 {
position: relative;
z-index: 1;
top: 40%;
transform: translateY(-50%);
}
.col-md-4 h1 {
position: relative;
z-index: 1;
top: 40%;
transform: translateY(-50%);
}
/* The Hover Effects */
.col-md-4 {
position: relative;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4::after {
content: "";
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4:hover {
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
z-index: 99999;
}
.col-md-4:hover::after {
opacity: 1;
}
/* Button */
.btn {
background: #F97B62;
background-image: -webkit-linear-gradient(top, #F97B62, #0081A5);
background-image: -moz-linear-gradient(top, #F97B62, #0081A5);
background-image: -ms-linear-gradient(top, #F97B62, #0081A5);
background-image: -o-linear-gradient(top, #F97B62, #0081A5);
background-image: linear-gradient(to bottom, #F97B62, #0081A5);
-webkit-border-radius: 60;
-moz-border-radius: 60;
border-radius: 60px;
-webkit-box-shadow: 0px 0px 0px #666666;
-moz-box-shadow: 0px 0px 0px #666666;
box-shadow: 0px 0px 0px #666666;
padding-right: 10px;
padding-left: 10px;
border-top: solid #666666 1px;
border-bottom: solid #666666 1px;
text-decoration: none;
}
.btn:hover {
background: #FFE097;
background-image: -webkit-linear-gradient(top, #FFE097, #FFE097);
background-image: -moz-linear-gradient(top, #FFE097, #FFE097);
background-image: -ms-linear-gradient(top, #FFE097, #FFE097);
background-image: -o-linear-gradient(top, #FFE097, #FFE097);
background-image: linear-gradient(to bottom, #FFE097, #FFE097);
text-decoration: none;
}
/* Basic Structure
-------------------------------------------------------------- */
h3 {
font-size: 14px;
text-align: center;
font-family: 'Buernard', Garamond, "Buenard", "EB Garamond", 'EB Garamond';
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="desktop-only container">
<div class="row">
<a href="About.html" title="About the site and Author">
<div class="col-md-4" id='div1'>
<h3>About</h3>
</div>
</a>
<a href="Articles.html" title="Articles and Original Content">
<div class="col-md-4" id='div2'>
<h3>Articles</h3>
</div>
<a href="CodingCorner" title="Code and Resources for a Variety of Projects">
<div class="col-md-4" id="div3">
<h3>Coding Corner</h3>
</div>
</a>
</div>
<div class="row">
<a href="contact.html" title="Contact The Floodplains & The FloodShark">
<div class="col-md-4" id="div4">
<h3>Contact & Social</h3>
</div>
</a>
<a href="thefloodshark" title="The FloodShark Music and Media">
<div class="col-md-4" id="div5">
<h1>
The FloodShark Music
</h1>
</div>
</a>
<a href="FloodplainProductions.html" title="An enigmatic, virtual record label">
<div class="col-md-4" id="div6">
<h1>Floodplain Productions</h1>
</div>
</a>
</div>
<div class="row">
<a href="ClassicalCorner" title="A nook dedicated to sharing and categorizing classical music">
<div class="col-md-4" id="div7">
<h3>Classical Corner</h3>
</div>
</a>
<a href="Gallery.html" title="Images, Photographs, and Album Art">
<div class="col-md-4" id="div8">
<h3>Gallery</h3>
</div>
</a>
<a href="support" title="Contribute to The Floodplains">
<div class="col-md-4" id="div9">
<h3>Contribute / Support</h3>
</div>
</a>
</div>
</div>
<div class="mobile-only desktop-hide container">
<div class="mobile-only desktop-hide row">
<a href="thefloodshark.html" title="About the site and Author">
<div class="col-md-4" id='div1'>
<h3>The FloodShark Music</h3>
</div>
</a>
</div>
<div class="mobile-only desktop-hide row">
<a href="FloodplainProductions.html" title="A nook dedicated to sharing and categorizing classical music">
<div class="col-md-5" id="div7">
<h3>The Floodplains</h3>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
这是我的网站在台式机上的外观,供参考:
任何帮助都将深表感谢。我可以肯定我的问题出在我的CSS和目前使用的@media上。