All geek questions in one place

Chrome error: edge to edge of browser?

I'm not sure if this is a bug in Google Chrome or if it is necessary, but it really annoys me: if I got something like

<body><div style="margin-bottom: 50px;">much content</div></body>

Chrome doesn't display div fields just ends at the bottom of the browser. Literally any other browser displays this correctly.

+6
source share
4 answers

add padding to the element containing your div, even if it is a body element. This works in all browsers, so you have to remove the bottom margin from the div.

+2
source

Wrap your entire site (or just an area that has the area you want to capture) in

 <div style="overflow:auto;"></div>

If the gasket setting is not suitable for you, try the above. I did not want to install the add-on, because the field at the bottom of the boxes is the standard way to make room for the next window when the data is dynamic, and I do not know if it will be.

Fields will not “leak” into the overflow field, so this fixes the problem in Chrome, allowing this last box to have a marker inside the new overflow: auto div.

This change is not significant for other browsers, which in any case blocked this margin. I tested in IE 8 and above for regressions from this side and did not find any.

+3
source

On Google Chrome, {padding-bottom: XXpx;} does not work, but {padding-bottom: XXem;} does.

Note that the former uses pixels and seconds of ems.

+2
source

The css padding and margin directives work fine in IE, but not in Chrome. Chrome simply ignores them if they are placed in a .css file. To fix this problem, put all the add-on commands and fields in a separate file in the <STYLE> tags, and then include it with <? Php include ('margins.php') ;? >. or <! - #include virtual = "margins.php" → on all your pages, because these directives work fine in Chrome if they are contained on the page.

0
source

Source: https://habr.com/ru/post/888412/

More articles:


All Articles