このhtmlには、基本的にsidebar-divとpage-divがあり、ヘッダー、コンテンツ、フッターが含まれています。page-divをwrapper-divではなく中央に配置したかったので、「left：-75px;」を追加しました。サイドバーの半分の幅-補正用のdiv。唯一の問題は、ブラウザウィンドウが小さくなり、サイドバーの一部が画面の外に出てしまうことです。
この問題を解決するにはどうすればよいですか？これが私のhtmlです。前もって感謝します！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FRAME</title>
<style type="text/css">
<!--
html {
padding:0px;
margin:0px;
}
body {
background-color:#e1ddd9;
margin:0px;
padding:0px;
}
p {
margin:10px;
}
li {
list-style-type:none;
margin-left:-10px;
}
#wrapper {
position:relative;
width:1000px;
margin:0px auto;
padding:0px;
left:-75px;
}
#sidebar {
width:140px;
padding:0px;
float:left;
background-color:#ff99cc;
margin-top:130px;
margin-right: 10px;
}
#page {
width:850px;
padding:0px;
float:left;
overflow:auto;
}
#header {
height:100px;
background-color:#ff0;
margin-bottom:10px;
padding:10px;
}
#content {
background-color:#ffffff;
padding:10px;
}
#footer {
height:100px;
margin-top:10px;
background-color:#ff99cc;
padding:10px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Sit</li><li>Amet</li></ul>
</div>
<div id="page">
<div id="header"><p>This is the header</p></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare mauris vel nulla fermentum sed iaculis mi sollicitudin. Nullam tortor ante, suscipit eu rutrum nec, pharetra et turpis. Vestibulum a metus et massa porta tincidunt. Nam ac enim quam, vitae dictum tortor. Cras porttitor rutrum turpis, id scelerisque sem pharetra eget. Proin rhoncus tincidunt erat, a ornare nibh faucibus dictum. Nam leo dui, lacinia sed hendrerit in, tempus vitae libero. Nam non erat ac ante tempus adipiscing.</p>
<p>Nulla a sodales ipsum. Phasellus nec erat vitae enim laoreet sollicitudin. Morbi a egestas augue. Curabitur ac justo sit amet ipsum suscipit pulvinar eget vitae turpis. Sed iaculis arcu velit, sed vestibulum quam. Maecenas semper dolor ac leo laoreet sed vehicula libero scelerisque. In dui augue, faucibus id feugiat eu, vulputate id ante. Ut rutrum placerat orci, vitae lacinia lorem gravida et. Nullam semper eros lacus, sit amet tristique erat. Curabitur imperdiet lacus sit amet odio auctor congue. Sed ultricies erat et felis tincidunt pulvinar.</p>
<p>Cras enim ipsum, faucibus sed vulputate sit amet, dignissim non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rutrum accumsan nibh, pharetra pharetra sem luctus eget. Donec vel tincidunt enim. Nunc vel ligula massa, in varius ante. Cras laoreet dui volutpat libero ultricies hendrerit. Maecenas lectus orci, rhoncus at elementum id, lobortis in velit. Praesent elementum tincidunt dui, id porttitor urna sollicitudin eget. Nunc sed quam justo, et consectetur lectus. Suspendisse eleifend erat eget felis sollicitudin dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce tincidunt, metus eu elementum venenatis, nibh purus pulvinar purus, eget convallis turpis risus a turpis. Praesent vel felis erat. Aenean elit nunc, dictum sit amet faucibus a, vehicula eget velit.</p>
</div>
<div id="footer"><p>This is the footer</p></div>
</div>
</div>
</body>
</html>