Strech to fit height...

Karaethon · January 4, 2019

I am wanting my page to fill the browser window even when the contents are less than big enough. I'm using bs4 and I know that this can be done somehow... Anyone know how?

requinix · January 4, 2019

Even an empty page will "fill" the window, so you'll have to explain what you mean by that.

Karaethon · January 4, 2019

My divs are not filling the screen, the green and yellow sections are supposed to stretch all the way down...

requinix · January 4, 2019

You can "stretch" the green by putting that background on the body instead of a div.

What's your markup?

Karaethon · January 4, 2019

6 hours ago, requinix said:

You can "stretch" the green by putting that background on the body instead of a div.

What's your markup?

Yeah but later when I add contents I'm using BS to center them vertically and so I need the div to fill the screen to center on the screen...

MARKUP:

<?php
include_once '../includes/safecracker.inc';
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Safe Cracker</title>
  <meta name="description" content="A webgame where users attempt to find yhe code to a vault that is filling with money, and win the money inside when it opens.">
  <meta name="author" content="Karæthon; Split Infinitive Software, LLC">

  <?PHP
    echo $js_jquery;
    echo $js_bootstrap;
    echo $css_bootstrap;
    echo $css_fontawesome;
    echo $css_override;
  ?>

</head>
<body>
  <div class="container-fluid">
    <div class="row d-flex">
      <div class="col-12 bg-success">
        <ul class="nav nav-pills nav-justified">
          <!-- list item only here during testing, remove upon release-->
          <li class="nav-item">
            <a class="active fas fa-home" data-toggle="collapse" data-target="#needcookies"></a>
          </li>
          <!-- end testing item-->
          <li class="nav-item">
            <a class="fas fa-home" data-toggle="collapse" data-target="#home"></a>
          </li>
          <li class="nav-item">
            <a class="fas fa-home"data-toggle="collapse" data-target="#login"></a>
          </li>
          <li class="nav-item">
            <a class="fas fa-home" data-toggle="collapse" data-target="#selectvault"></a>
          </li>
          <li class="nav-item">
             <a class="fas fa-home"data-toggle="collapse" data-target="#game"></a>
          </li>
          <li class="nav-item">
             <a class="fas fa-home"data-toggle="collapse" data-target="#purchase"></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row d-flex">
      <div class="col-2 bg-success sidebar"> </div>
      <div class="col-8 bg-warning" id="central">
        <div class="collapse" id="needcookies" data-parent="#central">111111</div>
        <div class="collapse show" id="home" data-parent="#central">222222</div>
        <div class="collapse" id="login" data-parent="#central">333333</div>
        <div class="collapse" id="selectvault" data-parent="#central">444444</div>
        <div class="collapse" id="game" data-parent="#central">555555</div>
        <div class="collapse" id="purchase" data-parent="#central">666666</div>
      </div>
      <div class="col-2 bg-success sidebar"> </div>
      <div class="navbar bg-primary data-toggler fixed-bottom" data-toggle="collapse" data-target="#footercontents">
        <span class="nav-brand small"><img src="/img/sis_logo.png" style="width: 40px;">© 2018-<?php echo date("Y");?> Split Infinitive Software</span>
        <div class="footercontents">
          <ul class="navbar-nav">
            <li class="nav-item">temp</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <?php

  ?>
</body>
</html>

requinix · January 4, 2019

Like I said, put the green background on the whole body.

For the yellow, I'm thinking position:absolute give a fixed height to the first row then position:absolute the second row with top/right/bottom/left values so it takes the full screen minus the amount at the top that the first row was using.

Karaethon · January 5, 2019

Ok, I guess that would work, but how do I get the values needed, JavaScript code to get window height and width?

Barand · January 5, 2019

Perhaps use vw or % units instead of px

Karaethon · January 5, 2019

17 hours ago, requinix said:

Like I said, put the green background on the whole body.

I woke up this morning and realized that I missed something. I only have the divs colored to ID them during development, they're all going to lose their color when I'm done, I realized that I didn't explain that, my goal is to have my content centered in the browser and that's why I'm trying to stretch the divs to full height.

maxxd · January 5, 2019

Building on your other post, what are your target browsers? If you're not concerned with IE9 and are using an auto-prefixer (or don't mind typing a lot) you can use flexbox. A combination of flex-grow with justify-content and align-items can do exactly what you're looking for easily. If you're targeting more modern browsers (in other words, you don't mind skipping out on IE support entirely), you can use grid, though that could be more complicated depending on how your brain works.

If you are dealing with much older browsers, use 100vh with positioning and transforms as @Barand suggests.

Karaethon · January 6, 2019

Well, I'm not personally worried a out browser support, I want to use the best practices I can and if the user is stuck in the past... well not my concern. I am doing development on an android device and testing using opera, firefox, chrome, duck duck go, and samsung internet as my test browsers. Mostly because that's what I have.

Karaethon · January 6, 2019

5 hours ago, maxxd said:

Building on your other post, what are your target browsers? If you're not concerned with IE9 and are using an auto-prefixer (or don't mind typing a lot) you can use flexbox. A combination of flex-grow with justify-content and align-items can do exactly what you're looking for easily. If you're targeting more modern browsers (in other words, you don't mind skipping out on IE support entirely), you can use grid, though that could be more complicated depending on how your brain works.

I am trying to use Bootstrap's flex but it just mashes my divs together. I am learning as i go and using w3schools' info as a reference, but some of the examples they use don't work once i transfer the code to my page....

maxxd · January 6, 2019

I'm not terribly versed in Bootstrap, but I can tell you that w3schools should be used as - at best - a place to find the terms you need to Google for the actual information.

From what I can see from the documentation, Bootstrap's flexbox coverage looks pretty good, though it's always been the small, medium, large, and extra large designations that my brain doesn't deal well with.

*edit* I'm not sure what kind of auto-prefixing Bootstrap does - I have to assume there's some as it's so widely used, but that may be a bit of a sticking point, especially with the mobile Samsung browser as it seems to have some idiosyncrasies of its own. Also, watch iOS Safari with flexbox as that can be a bit sticky if you're not using Babelify or another auto-prefixer (and sometimes even if you are - I've found it to do some strange things for no reliably reproduce-able reasons).

Edited January 6, 2019 by maxxd
expounding

Karaethon · January 6, 2019

3 hours ago, maxxd said:

w3schools should be used as - at best - a place to find the terms you need to Google for the actual information.

I'm realizing that quite fast.

BTW, what's an auto-prefixer? (I mean what's it do)

Edited January 6, 2019 by Karaethon
Asking questions

maxxd · January 6, 2019

An auto-prefixer will add any necessary browser-specific prefixes to CSS rules during compile time. I use gulp-autoprefixer in my build flow right after I convert from .less to .css and concat all the files, but before I minify. My CSS task in my gulpfile looks like this:

const aw = require('gulp-load-plugins')({
	pattern: ['*'],
	scope: ['dependencies']
});

// .... other tasks

aw.gulp.task('compileCSS', () => {
	"use strict";
	return aw.gulp
		.src(theme.srcStyle)
		.pipe(aw.plumber(handleError))
		.pipe(aw.less({
			strictMath : 'on',
			strictUnits : 'on',
		}))
		.pipe(aw.concat('all.css'))
		.pipe(aw.autoprefixer({
			browsers: [
				"last 2 versions",
				"IE >= 10",
			],
			grid: false,
		}))
		.pipe(aw.cssmin())
		.pipe(aw.rename({
			extname : '.css',
			basename : 'style'
		}))
		.pipe(aw.gulp.dest(theme.destCSS));
});

Note the `aw.autoprefixer` call - that's using the gulp-autoprefixer module and asking it to add any browser-specific prefixes necessary for all browsers up to 2 versions back from the current version of all modern browsers, as well as Internet Explorer 10 and 11. It also turns grid CSS support off because the support for grid in media queries is a bit spotty. At any rate, it allows me to type this:

.wrapper{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
}

And get this output:

.wrapper{display:flex;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}

You can see how the flex-direction and justify-content browser-specific syntax for both IE10 and Safari 3.0 on iOS 1.0 are appended automatically. Obviously you'll get more rules as you change the values in the browsers array you pass into the autoprefixer call in your gulpfile.

tl;dr - it saves you a lot of time thinking, Googling, and typing while doing it's best behind the scenes to make sure your site's CSS is consistent across as many browsers as possible.

Totally random aside, but I'll probably start trying to use sourcemaps soon, which right now I don't due to the in-house development style at my job, because I'm currently trying to change that process.

Karaethon · January 6, 2019

?

OMG... Ok so I've been out of the loop for a while (12 years, or 6 with good behavior [which I apparently cannot do]) when I was designing up to 2006 I never knew that css could do what it does now.... I'm needing to catch up.

maxxd · January 7, 2019

Don't feel bad, I've been doing this for 20 years pretty much straight through and I'm still playing catch-up. I've had some people scoff recently because I use Vagrant and Gulp and manually deploy WordPress sites to a server as opposed to Docker, Webpack, continuous integration, and automated deployment to a server-less AWS instance.

What I'm saying is that this stuff moves hella fast.

Edited January 7, 2019 by maxxd

Sign In

Strech to fit height...

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information