html5 - Responsive and nonresponsive code in same page -
the website working on huge , can't shotgun entire thing @ once. so, have build in phases. problem is, going table structure 1990s website bootstrap-divs responsive website. means, once build , release first phase, has consistent throughout site.
in other words, header/footer has work , same in non-responsive pages (built tables) , responsive pages (bootstrapped) alike. so, since site going towards being full responsive site, header responsive , not rest of site.
here problem, header fixed top, , responsive. page content not using responsive code getting scrollbar @ bottom (of course). footer refuses go 100% width unless fix , can't that. must remain in bottom , must responsive too.
i made codepen showing problem simple vanilla page. see here
footer class
footer{ width:100%; background:#ddd; height:35px; } now, reason, keep footer on bottom (or seems) if add position: absolute , bottom:0, moves center of page instead!
that's yucky one.
you wrap non-responsive page content in element prevents causing horizontal scroll bar @ <body> level. then, allow only element scroll horizontally.
it's not ideal, work until can make whole site consistently responsive.
.page-content-wrap { max-width: 100%; overflow-x: scroll; } .page-content { padding-top: 70px; width: 1170px; margin: 0 auto; } footer { width: 100%; background: #ddd; height: 35px; }<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <!-- fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a> </li> <li><a href="#about">about</a> </li> <li><a href="#contact">contact</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li class="divider"></li> <li class="dropdown-header">nav header</li> <li><a href="#">separated link</a> </li> <li><a href="#">one more separated link</a> </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="../navbar/">default</a> </li> <li><a href="../navbar-static-top/">static top</a> </li> <li class="active"><a href="./">fixed top <span class="sr-only">(current)</span></a> </li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="page-content-wrap"> <div class="page-content"> <div class="box"> <h1>navbar example</h1> <p>this example quick exercise illustrate how default, static , fixed top navbar work. includes responsive css , html, adapts viewport , device.</p> <p>to see difference between static , fixed top navbars, scroll.</p> <p>this example quick exercise illustrate how default, static , fixed top navbar work. includes responsive css , html, adapts viewport , device.</p> <p>to see difference between static , fixed top navbars, scroll.</p> <p>this example quick exercise illustrate how default, static , fixed top navbar work. includes responsive css , html, adapts viewport , device.</p> <p>to see difference between static , fixed top navbars, scroll.</p> <p>this example quick exercise illustrate how default, static , fixed top navbar work. includes responsive css , html, adapts viewport , device.</p> <p>to see difference between static , fixed top navbars, scroll.</p> <p>this example quick exercise illustrate how default, static , fixed top navbar work. includes responsive css , html, adapts viewport , device.</p> <p>to see difference between static , fixed top navbars, scroll.</p> <p>this example quick exercise illustrate how default, static , fixed top navbar work. includes responsive css , html, adapts viewport , device.</p> <p>to see difference between static , fixed top navbars, scroll.</p> <p>this example quick exercise illustrate how default, static , fixed top navbar work. includes responsive css , html, adapts viewport , device.</p> <p>to see difference between static , fixed top navbars, scroll.</p> <p>this example quick exercise illustrate how default, static , fixed top navbar work. includes responsive css , html, adapts viewport , device.</p> <p>to see difference between static , fixed top navbars, scroll.</p> <p> <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">view navbar docs »</a> </p> </div> </div> <!-- /container --> </div> <footer> <div class="container"> footer </div> </footer>
Comments
Post a Comment