div 100% 로 했을시 문제가 생기네요.. 정보
div 100% 로 했을시 문제가 생기네요..첨부파일
본문
div 100% 로 했을시 전체창에서 창을 반으로 줄이면 가로 스크롤바가 나오는데 화면을 반으로 줄인상태에서 스크롤바를 오른쪽으로 옮기면 흰여백이 생기네요 ㅠㅠ
수정할 방법이 있을가요?
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
body{
font-family:tahoma,arial,sans-serit,verdana;
font-size:0.74em;
color:#000;
background:#FFF;
}
#top{
position:relative; /* 3 */
height:100px;
color:#FFF;
background:#000;
z-index:1; /* 3 */
}
#middle{
min-height:100%;
margin:-100px 0 -50px;
background:#DDD;
}
*html #middle{
height:100%;
}
#middle #wrapper{ /* 5 */
width:100%;
display:table;
}
#middle #wrapper #left{
position:relative; /* 3 */
float:left; /* 1 */
width:200px; /* 1 */
margin-right:-200px; /* 1 */
padding:100px 0 50px;
background:#999;
}
#middle #wrapper #content{
float:left; /* 4 */
width:100%; /* 4 */
line-height:1.3em;
padding:100px 0 50px;
background:#BBB;
}
#middle #wrapper #content div.inside{ /* 2 */
padding-left:210px;
}
#bottom{
position:relative; /* 3 */
height:50px;
color:#FFF;
background:#000;
z-index:1; /* 3 */
}
</style>
</head>
<body>
<div id="top">#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top</div>
<div id="middle">
<div id="wrapper">
<div id="left">#left</div>
<div id="content">
<div class="inside">#content</div>
</div>
</div>
</div>
<div id="bottom">#footer</div>
</body>
</html>
수정할 방법이 있을가요?
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
body{
font-family:tahoma,arial,sans-serit,verdana;
font-size:0.74em;
color:#000;
background:#FFF;
}
#top{
position:relative; /* 3 */
height:100px;
color:#FFF;
background:#000;
z-index:1; /* 3 */
}
#middle{
min-height:100%;
margin:-100px 0 -50px;
background:#DDD;
}
*html #middle{
height:100%;
}
#middle #wrapper{ /* 5 */
width:100%;
display:table;
}
#middle #wrapper #left{
position:relative; /* 3 */
float:left; /* 1 */
width:200px; /* 1 */
margin-right:-200px; /* 1 */
padding:100px 0 50px;
background:#999;
}
#middle #wrapper #content{
float:left; /* 4 */
width:100%; /* 4 */
line-height:1.3em;
padding:100px 0 50px;
background:#BBB;
}
#middle #wrapper #content div.inside{ /* 2 */
padding-left:210px;
}
#bottom{
position:relative; /* 3 */
height:50px;
color:#FFF;
background:#000;
z-index:1; /* 3 */
}
</style>
</head>
<body>
<div id="top">#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top</div>
<div id="middle">
<div id="wrapper">
<div id="left">#left</div>
<div id="content">
<div class="inside">#content</div>
</div>
</div>
</div>
<div id="bottom">#footer</div>
</body>
</html>
댓글 전체
상단에 #top 글자가 길어서 그런것이니
word-break:break-all; 을 사용하시거나
상단글이 짤려야 되는게 아니면 전체를 div 로 쌓으시고 width 값을 지정해 주셔야 합니다 body 에 주셔도 되고요
word-break:break-all; 을 사용하시거나
상단글이 짤려야 되는게 아니면 전체를 div 로 쌓으시고 width 값을 지정해 주셔야 합니다 body 에 주셔도 되고요
질문을 올려놓고 이제 봤네요 -_-
감사합니다~
감사합니다~
