473,746 Members | 2,209 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Body width/height 100%

How do you give a <body> a 10px margin on every side, then a border? That
is, an inset border.

In the example below, the browsers I've tried interpret "width:100% " as 100%
of the width including margins (the same width the height). As the actual
display area for the body contents is the window display area minus the CSS
margin, scroll bars show up.

I don't want hard-coded dimensions, the body should resize and reflow (and,
when needed, scroll bars show up) as the window is resized.

--
Joakim Braun

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{margin:10p x;border:1px solid black;width:100 %;height:100%;}
</style>
</head>
<body>
</body>
</html>
Jul 21 '05 #1
6 47756
"Joakim Braun" <jo**********@j fbraun.removeth is.com> writes:
How do you give a <body> a 10px margin on every side, then a border? That
is, an inset border.
What do you want to happen to the border when
(a) the content of the body doesn't fill the viewport
(b) it's larger, so it needs to scroll?
In the example below, the browsers I've tried interpret
"width:100% " as 100% of the width including margins (the
same width the height).


As it's supposed to (whether or not one thinks that is a
sensible model). If you set width: auto you get something
more agreeable. For height, it's not clear where you want
the bottom border to appear. If you set height: auto, you'll
get something which, when the content is large enough, will
leave a 10px margin at the bottom when scrolled to the
bottom, but a much bigger one if the content isn't big
enough.

--
Jón Fairbairn Jo***********@c l.cam.ac.uk

Jul 21 '05 #2
"Jón Fairbairn" <jo***********@ cl.cam.ac.uk> writes:
"Joakim Braun" <jo**********@j fbraun.removeth is.com> writes:
How do you give a <body> a 10px margin on every side, then a border? That
is, an inset border.
What do you want to happen to the border when
(a) the content of the body doesn't fill the viewport
(b) it's larger, so it needs to scroll?

[...] For height, it's not clear where you want
the bottom border to appear. If you set height: auto, you'll
get something which, when the content is large enough, will
leave a 10px margin at the bottom when scrolled to the
bottom, but a much bigger one if the content isn't big
enough


I forgot to add that if you set the margin and border on
html instead of on body, you get something that fits the
viewport if the content is small. I'm not sure whether this
is behaviour one can rely upon, though.

--
Jón Fairbairn Jo***********@c l.cam.ac.uk
Jul 21 '05 #3
Joakim Braun wrote:
How do you give a <body> a 10px margin on every side, then a border? That
is, an inset border.

In the example below, the browsers I've tried interpret "width:100% " as 100%
of the width including margins (the same width the height). As the actual
display area for the body contents is the window display area minus the CSS
margin, scroll bars show up.

I don't want hard-coded dimensions, the body should resize and reflow (and,
when needed, scroll bars show up) as the window is resized.


Forget the 10px and go with a small percentage, say 2 or 3? Then
subtract your percentage for margins from the width you want.

Height is another story. Body height is based upon content rather than
browser window size. It's better to leave it alone although you can go
through some contortions to set it. Do some studying at:
http://www.w3.org/TR/REC-CSS2/ about absolute positioning and possibly
margins if you REALLY want to still set the height. I can't tell you
right off as this is something I don't even try to do.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein
Jul 21 '05 #4
"Uncle Pirate" <st**@surecann. com> skrev i meddelandet
news:41******** @nntp.zianet.co m...
Joakim Braun wrote:
How do you give a <body> a 10px margin on every side, then a border? That is, an inset border.

In the example below, the browsers I've tried interpret "width:100% " as 100% of the width including margins (the same width the height). As the actual display area for the body contents is the window display area minus the CSS margin, scroll bars show up.

I don't want hard-coded dimensions, the body should resize and reflow (and, when needed, scroll bars show up) as the window is resized.


Forget the 10px and go with a small percentage, say 2 or 3? Then
subtract your percentage for margins from the width you want.

<snip>

Thanks, that's an idea.

What I'm trying to do is have an inset frame around the whole page, with the
contents being a header at the top stretching over 100% of the body width
minus margins, and below that an iframe filling the rest of the available
body area (and having scroll bars when needed). So the inset frame would
remain at most window sizes.

--
Joakim Braun
Jul 21 '05 #5
Joakim Braun wrote:
What I'm trying to do is have an inset frame around the whole page, with the
contents being a header at the top stretching over 100% of the body width
minus margins, and below that an iframe filling the rest of the available
body area (and having scroll bars when needed). So the inset frame would
remain at most window sizes.


A link to the page you are trying to put together might help people come
up with better solutions.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein
Jul 21 '05 #6
"Uncle Pirate" <st**@surecann. com> skrev i meddelandet
news:41******** @nntp.zianet.co m...
Joakim Braun wrote:
What I'm trying to do is have an inset frame around the whole page, with the contents being a header at the top stretching over 100% of the body width minus margins, and below that an iframe filling the rest of the available body area (and having scroll bars when needed). So the inset frame would
remain at most window sizes.


A link to the page you are trying to put together might help people come
up with better solutions.


www.jfbraun.com/trash/demo.htm
Jul 21 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
8341
by: Greg | last post by:
Javascript Folks, I am relatively new to javascript and am working on a script where I want to utilizes a couple of iframes and format text in them. I have run into a problem with getting the following code to work in mozilla. It seems to work in ie. Eventually I will be replacing the H1 node with a table until I can get the H1 node to show up in mozilla there is not much point.
5
3017
by: bipède | last post by:
Hi, Is it possible in Mozilla / Firefox / Netscape to fix minimum size for html and/or body element in a "real" XHTML (mime application/xhtml+xml) page so that when there is few text in a page the background color fill the window and when content exeed the window size the body resize to include all the content. For now I can't figure out how to do this, if I use height:100%; width:100% the size of html and body is *always* 100% even...
10
5664
by: Josselin | last post by:
(Mac 10.4.6 , Firefox/1.5.0.3 Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; fr; rv:1.8.0.3) Gecko/20060426 ) I am trying to setup a Reusable Image Cache in JS ( as per http://www.devx.com/webdev/Article/20947 ) In order to o survey the events from image loading in a group container, It seems necessary to perform the following function, ImagePair(file) . Unfortunatly Firefox javascript checking mentions an error with this
10
6267
by: VK | last post by:
Richard Cornford wrote: > The html element is the outermost element in an (x)HTML document. > All other elements are its descendants, with its direct children being > the head and body elements. It is not exactly true at least for Firefox (keep missing to test in full on Opera). In Firefox HTML is a container as any other where you can add say images and div's. Try html { width:100%;
3
2262
by: =?Utf-8?B?dG9t?= | last post by:
Hi All, I have a theme with a Style.css in which I have defined a style rule for the body element : body { min-width: 780px; margin: 0; padding: 0;
5
10662
by: Pugi! | last post by:
I am making a site with lot of AJAX components. When I present a form (in a layer on top of contents of page) I want to make sure that the user cannot click on a link or button other then on the form. The way to do this is to create a layer just underneath the form that blocks the elements on the page underneath. This is the easy part. The hard part is to get the size of the blocking layer right. Using width:100% and height:100% the layer...
4
2483
by: AAaron123 | last post by:
<body runat="server" id="MainBody"> <form id="form1" runat="server" style="background-color:green; width: 100%; height: 100%"> <br /> Table1" runat="server" Style="background-color:Yellow; width: 100%; height: 90%" BorderColor="Maroon"
0
8970
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8796
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9491
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9214
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8221
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6057
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4829
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2761
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2196
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.