Question

在这个html中我基本上有一个sidebar-div和一个带有标题，内容和页脚的page-div。我希望page-div位于中心，而不是wrapper-div，因此我添加了“left：-75px;”侧边栏的宽度的一半用于补偿。唯一的问题是当浏览器窗口变小时，侧边栏的位会移到屏幕外。

我该怎么做才能解决这个问题？这是我的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>

Answer 1

我不得不承认我不确定你要做什么。使用850px长的主分区，如果你希望它以小分辨率（如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>

当浏览器窗口太小时，将div切除

1 个答案: