Device-independent width for readable single column layout - html

Question

I'd like to use a centered, single-column HTML/CSS layout similar to stackoverflow's for both, desktop and mobile use, i.e. very different screen widths and resolutions.
I'd like to avoid having to use code (client or server) to detect and handle devices differently (i.e. deliver different layouts / styles).
The layout
should be centered (currently using centered div using auto property for left and right margins - this requires a fixed width)
should be variable width depending on device screen width, i.e. a comfortable column width on desktop computer but full width on mobile
will have header bar that visually extends to the window edges (same as stackoverflow's) and a have footer that should be at the bottom of the page, even if there's not much content (for this, CSS Single-column layout centered fixed-width 100% height w header and footer may have an answer)
Can this be achieved based on a simple centered div such as the following or what is the state-of-the-art? The following is rendered tiny on Firefox for Android:
#center {
margin: 0 auto 0 auto;
width: 10em;
background-color: gray;
}
<div id="center">
Content div<br/>
<ul>
<li>should be centered</li>
<li>should be variable width depending on device screen width, i.e. a comfortable column width on desktop computer but full width on mobile</li>
<li>will have header bar that visually extends to the window edges and a have footer that should be at the bottom of the page, even if there's not much content (for this, https://stackoverflow.com/questions/23651942/ may have an answer)</li>
</ul>
</div>
Note I'm using 10em for the width (to make it fit in the snippet editor preview) - is there a more appropriate unit or additional properties for an "absolute" size to ensure readability (and sizing) on all screens?
Desktop:
Mobile:

Answer 1

The awswer you found already gave a big hint in what you should be using for this, namely display: flex;. Building on top of the fiddle provided there, you could do something like this:
Which is giving the main content column a 100% value of width in combination with a max-width of, let say, 768px. In this example flex-grow:1; is used to fill up the height completely but maybe not be necessary for your project.
html,
body {
height:100%;
padding:0;
margin:0;
width:100%;
}
body {
display:flex;
flex-direction:column;
}
#main {
flex-grow:1;
background:#f3f3f3;
max-width: 768px;
width:100%;
margin:auto;
}
header {min-height:50px; background:green;}
footer {min-height:50px; background:blue;}
<header>header</header>
<div id="main" role="main">content</div>
<footer>footer</footer>