nicht angemeldet
Zwei div mit einer Gesamtbreite von innerWidth: Warum Scrollbar
Hallo,
ich sitze an einem Interface für eine Applikation und versuche dabei die Tücken des Window Resize abzufangen. Unter anderem positioniere ich zwei div nebeneinander. Von diesen zwei divs hat das rechte eine feste Breite im css. Dem linken div verpasse ich per JavaScript die Breite des window abzüglich der Breite des rechten divs. In Webkit Browsern funktioniert das gar nicht, da erscheinen immer Scrollbars (und ganau die Breite der Scrollbars fehlt mir dann). Und im Mozilla funktioniert es mal - mal nicht - je nach Größe?
http://demo.analogeins.de/div/scrollbar/resize_test.html
Hat jemand eine Idee woran das liegt und wie man das fixen kann. Ich habe es schon mal mit overflow: hidden auf dem body versucht. Das ist aber keine sehr saubere Lösung und funktioniert anscheinend auf dem iPad nicht.
Danke
Andreas
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/template.css" rel="stylesheet">
<script type="text/javascript" src="js/template.js"></script>
</head>
<body>
<header id="header">
</header>
<section id="content">
<div class="acc" id="acc1">
<header>
<h2>Acc1</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
set eiusmod tempor incidunt et labore et dolore magna aliquam.
Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="acc" id="acc2">
<header>
<h2>Acc2</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
set eiusmod tempor incidunt et labore et dolore magna aliquam.
Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="acc" id="acc3">
<header>
<h2>Acc3</h2>
</header>
</div>
</section>
<nav id="menu_bar">
<p>Menü</p>
</nav>
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: Droid Sans Regular;
font-size: 12px;
}
/* grid */
#header {
background-color: #60a6a2;
height: 50px;
}
#content {
background-color: #60a6a2;
float:left;
}
#menu_bar {
width: 247px;
float:right;
background-color: #4d4d4d;
}
.acc {
overflow: hidden;
}
#acc1 {
height: 60%;
background-color: #d9d9d9;
}
#acc2 {
height: 20%;
background-color: #d9d9d9;
}
#acc3 {
height: 20%;
background-color: #d9d9d9;
}
.acc h2 {
height: 21px;
margin: 0px;
padding: 4px 0px 0px 30px;
border-top: solid 1px #e4e4e4;
background-color: #4bf72b;
font-size: 13px;
}
function $(str){
return document.getElementById(str);
}
function init(){
content = $("content");
menu_bar = $("menu_bar");
acc1 = $("acc1");
acc2 = $("acc2");
acc3 = $("acc3");
resizeHeight();
}
function resizeHeight (){
var startHeight = window.innerHeight;
var startWidth = window.innerWidth;
var contentHeight = startHeight-50;
var contentWidth = startWidth-247;
var content = $("content");
content.style.height = contentHeight+"px";
content.style.width = contentWidth+"px";
menu_bar.style.height = contentHeight+"px";
}
window.onload = init;
window.onresize = resizeHeight;
-
Hi,
Unter anderem positioniere ich zwei div nebeneinander. Von diesen zwei divs hat das rechte eine feste Breite im css. Dem linken div verpasse ich per JavaScript die Breite des window abzüglich der Breite des rechten divs.
Und warum machst du das per JavaScript?
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?