0

在这个 html 中，我基本上有一个 sidebar-div 和一个 page-div，其中包含页眉、内容和页脚。我希望 page-div 位于中心，而不是 wrapper-div，因此我添加了“left:-75px;” sidebar-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>
4

1 回答 1

1

我不得不承认我不确定你想做什么。使用 850px 长的主 div，如果您希望它以小分辨率（例如 800x600）居中，我很清楚您根本无法显示侧窗格。

因此，您似乎可以将其居中或将侧窗格完全居中。您是否正在寻找如果屏幕太小会出现水平滚动的解决方案？

<!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;
overflow: hidden;
}
p {
margin:10px;
}
li {
list-style-type:none;
margin-left:-10px;
}

#wrapper {
width: 1150px;
margin: auto;
padding: 0px;
}
#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;
}
#fakebar {
width: 140px;
float: left;
}

#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 id="fakebar"></div>

</div>

</body>
</html>
于 2012-06-15T12:24:32.927 回答