Sandor Posted February 11, 2017 Share Posted February 11, 2017 One of the pages I've got for a mobile application is "shorter" than most phone screens. Since I've taken pains to use a color schema that does not use white backgrounds, is there any way to tell the browser what color to paint the otherwise undefined space? I'm using w3.css color tags in the body and want to match the background to the last container in the stack, so that any remaining whitespace is tinted. My first thought was to use the background-color property. I'm not sure if it plays well with w3.css tagging, and even if I color-code around that, it seems to conflict with the max-width property I'm using to force my browser to render a mobile-phone screen sized output. I realize that I can go forward on the production version without the max-width field set and that will likely be the end of the issue, but I'd like to 'see it' during testing. Any thoughts? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 11, 2017 Share Posted February 11, 2017 Usually if the content is shorter?, you would use min-height: and for a unit you can use 'vh' with 100vh filling the total viewport height of the device. I don't see how background will conflict with max-width:, again! usually the wrapping and content containers are block elements, or set as display block styled element so they will occupy the total width available to them. An issue only occurs if the elements are floated then they need content to force them to the total width available to them, which seems to be what you are describing? Link to comment Share on other sites More sharing options...
Sandor Posted February 12, 2017 Author Share Posted February 12, 2017 Ok, that helped quite a bit. print "<body style=\"max-width:400px; min-height: 100vh; background-color: steelblue;\">\n"; This worked as expected. I suspect that I was not passing the multiple entries properly and the browser followed neither direction. But its uncovered another issue. If your using a graphic in a display container, and the graphic has transparency in it, it shows the background color above, not the background of the container its in. Since I'm using a different container background for each block in the stack, this is... undesired operation. Programming, right? Fix one issue and find two more. *grin* Link to comment Share on other sites More sharing options...
dsonesuk Posted February 12, 2017 Share Posted February 12, 2017 IF you overlapping using position: relative/absolute; you may have conflicting z-index: auto; (default setting) layering, unless you set these manually to force a specific layering of these container elements. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now