html – 当窗口大小减小时,使用媒体查询增加我的身体容器高度的大小时,它将无法工作._html-js-css

概述我正在尝试创建一个容器,它占据我桌面屏幕上的整个空间,这就是我想要的.但是,当我将其调整到移动屏幕时,我希望它能够响应.它只占用移动屏幕上的四分之一空间.我也不希望我的页脚容器和主体容器重叠.我可以用overflow：auto修复它.但是,我不希望如此.我不希望用户滚动我的身体,而是静态.喜欢我的容器粘在底部.这是截图和我的代码： HTML <div class="header-container 我正在尝试创建一个容器,它占据我桌面屏幕上的整个空间,这就是我想要的.但是,当我将其调整到移动屏幕时,我希望它能够响应.它只占用移动屏幕上的四分之一空间.我也不希望我的页脚容器和主体容器重叠.我可以用overflow：auto修复它.但是,我不希望如此.我不希望用户滚动我的身体,而是静态.喜欢我的容器粘在底部.这是截图和我的代码：

HTML

<div >        <i ></i>    </div><br>    <div >        <h1 >The Mihir Chronicles</h1><br>        <div >        <p>Hi,I am Mihir (me-here). I am a <strong>full-stack web developer</strong> and an entrepreneur based in Chicago. PrevIoUsly,founded a social enterprise venture,<strong>Humble Pen</strong> and co-founded Royal Ace Investments.</p>        <p>AsIDe from my entrepreneurial endeavours,I’ve also worked for several venture-backed startups. Currently,I am a mentor at Dev Mountain. Lately,I've been fascinated by programming. Usually,I am on my computer learning new frameworks and technologIEs.</p>        <p>I am absolutely passionate about <strong>finance,programming</strong> and <strong>technology</strong>. I find <strong>art</strong> and <strong>astronomy</strong> to be absolutely cool. On the weekends,I volunteer as a <strong>Telescope Instructor</strong> at the Adler Planetarium. I usually read a lot when I am not working.</p>        </div>        <h2 >-Mihir (me-here!)</h2>        <a href="http://themihirchronicles.tumblr.com"><button class ="btn" type="text">Enter!</button></a>        <!-- <button class ="btn" type="text">Essays</button> -->    </div><br>    <div >        <ul>            <li><a href="https://github.com/mihirchronicles"><i ></i></a></li>            <li><a href="https://twitter.com/mihirchronicles"><i ></i></a></li>            <li><a href="https://instagram.com/mihirchronicles"><i ></i></a></li>            <li><a href="https://www.linkedin.com/in/mihirchronicles"><i ></i></a></li>            <li><a href="mailto:mihirptl89@gmail.com"><i ></i></a></li>            <li><a href="http://themihirchronicles.tumblr.com/"><i ></i></a></li>        </ul>    </div>

CSS

* {Box-sizing: border-Box;} HTML,body {  height: 100%;  wIDth: 100%;  margin: 0 auto;  padding: 0; }.header-container {    color: #2789e5;    margin: 0 auto;    text-align: justify;    height: 15%;    wIDth: 85%;    padding-top: 25px;}.body-container {    margin: auto;    text-align: left;    height: 60%;    wIDth: 85%;    Font-family: serif;  Font-size: 12px;  /*overflow: auto;*/  border: dotted;  @R_403_4612@: absolute;  left: 0;  right: 0;}.footer-container {  margin: 0 auto;  text-align: right;  wIDth: 85%;  height: 10%;  @R_403_4612@: absolute;  bottom: 0;  left: 0;  right: 0;  border: dotted;}.body-Title {    Font-family: 'ReenIE BeanIE',cursive;}.body-content {    Font-family: "CourIEr New",CourIEr,monospace;}.body-end {    Font-family: 'ReenIE BeanIE',cursive;}ul li { List-style-type: none; float: left;}a {    color: #70a2d1;}ul li a i:hover { opacity: .8;}li {    margin: 0 0 0 15px;}@media only screen and (max-wIDth: 300px) {  .body-container {    Font-size: 1.5em;  }}

ScreenShot为手机屏幕

解决方法

<Meta name="vIEwport" content="wIDth=device-wIDth" />

我认为你的意思是什么.
把它放在你的

<head>

部分,并尝试希望它适合你.

有媒体查询,我不能帮助你,因为我恨他们.

overflow-x:hIDden;overflow-y:auto;

总结

以上是内存溢出为你收集整理的html – 当窗口大小减小时,使用媒体查询增加我的身体容器高度的大小时,它将无法工作.全部内容，希望文章能够帮你解决html – 当窗口大小减小时,使用媒体查询增加我的身体容器高度的大小时,它将无法工作.所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1056058.html

html – 当窗口大小减小时,使用媒体查询增加我的身体容器高度的大小时,它将无法工作.

发表评论

评论列表（0条）