响应式两列布局（列表和详细信息面板）答案

【问题标题】：Responsive two column layout (list and details panel)响应式两列布局（列表和详细信息面板）
【发布时间】：2015-10-11 17:42:29
【问题描述】：

如何创建响应式两列布局，左列显示命中列表，右列（详细信息面板）显示列表中所选项目的详细信息？

列表项应具有（相对）固定宽度，而详细信息面板应使用所有剩余空间。
两列都应该是可滚动的。
布局的两侧应该有一些空白区域。
在页面顶部应该有一个固定的搜索区域。

编辑：这是我到目前为止所拥有的......：

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>example</title>
    <link rel="stylesheet" type="text/css" href="Content/CSS/style.css">
</head>
<body>
	<div id="center">
		<header>
			<input type="text" placeholder="search...">
		</header>
		<nav>
			<ul>
				<li>
					<img src="http://lorempixum.com/100/100/nature/1">
					<h3>Headline 1</h3>
					<p>Lorem ipsum dolor sit amet
				</li>
				<li>
					<img src="http://lorempixum.com/100/100/nature/1">
					<h3>Headline 2</h3>
					<p>Lorem ipsum dolor sit amet
				</li>
			</ul>
		</nav>
		<div id="details">
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
		</div>
	</div>
</body>
</html>

CSS

body{
    width: 100%;
    height: 100%;
	margin: 0;
	padding: 0;	
}
header{
    position: fixed;
    top: 0;
    left:1%;
    width: 98%;
    height: 10%;
    background-color: #ddd;
}
nav{
    position: fixed;
    left: 1%;
    top:10%;
    width: 29%;
    min-width: 120px;
    background-color: #fff;
    height:90%;
	overflow-y: auto;
}
#details{
    position: fixed;
    right: 1%;
    top:10%;
    width: 69%;
    background-color: #fff;
    height:90%;
	overflow-y: auto;
}
#center {
	width: 100%;
	overflow-y:hidden;
 }

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background-color: #fff	;
    border-left: 1px solid #fff;
}
::-webkit-scrollbar-thumb {
    background-color: #efefef;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #ccc;
}


ul {
	list-style-type: none;
	margin: 0;
	padding: 0;	
}
 
h3 {
	font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
 
li img {
  float: left;
  margin: 0 10px 0 0;
}
 
li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
 
li {
  padding: 10px;
  overflow: auto;
}
 
li:hover {
  background: #fff;
  cursor: pointer;
}

问题：如何删除代表“主”垂直滚动条的白色垂直条？我想为这两列添加一个左右边距。

【问题讨论】：

到目前为止你尝试过什么？只需谷歌“响应式两列布局”，就有很多方法。另外，“响应式”是什么意思？你想改变什么，什么时候改变？
Jaunt，详情面板的宽度要适应屏幕大小。当屏幕变得太窄时，如果详细信息面板可以显示在相应的列表项下方，那就太好了。抱歉问了一些愚蠢的问题

标签： html css responsive-design

【解决方案1】：

使用简单的 html 和 css 可以做到这一点，但是，我假设您需要它是动态的。

我的示例非常基本，但我猜这就是您的目标，但我不是在做您的设计，您应该自己做。

html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
    <input type="text" placeholder="search...">
</header>
<nav>
    <ul>
        <li>
            Hit 1
        </li>
        <li>
            Hit 2
        </li>
    </ul>
</nav>
<div id="details">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>
</body>
</html>

css:

header{
    position: fixed;
    top: 0;
    left:1%;
    width: 98%;
    height: 10%;
    background-color: green;
}
nav{
    position: fixed;
    left: 1%;
    top:10%;
    width: 19%;
    min-width: 120px;
    background-color: red;
    height:90%;
}
#details{
    position: fixed;
    right: 1%;
    top:10%;
    width: 79%;
    background-color: blue;
    height:90%;
}
body{
    width: 100%;
    height: 100%;
}

【讨论】：

杰西，感谢您的回复。我试试看……！

【解决方案2】：

我尝试用基本的 HTML 和 CSS 来做这件事。

它与上述解决方案类似：

代码将由以下部分组成：

HTML：

 <!DOCTYPE html>
<html>
<head>
    <title>Responsive Two Page Layout</title>
</head>
<body>
<div id= "search">
<span id="searchSpan">
    <input type="text" value="" id="searchtext" placeholder="Search"/>
</span>
</div>
<div id="cols">
    <div id="hitList">
        <ul id="list">
            <li><a href="A.html" target="details">A</a></li>
            <li><a href="B.html" target="details">B</a></li>
            <li><a href="C.html" target="details">C</a></li>
            <li><a href="A.html" target="details">A</a></li>
            <li><a href="B.html" target="details">B</a></li>
            <li><a href="C.html" target="details">C</a></li>
            <li><a href="A.html" target="details">A</a></li>
            <li><a href="B.html" target="details">B</a></li>
            <li><a href="C.html" target="details">C</a></li>
            <li><a href="A.html" target="details">A</a></li>
            <li><a href="B.html" target="details">B</a></li>
            <li><a href="C.html" target="details">C</a></li>

        <ul>
    </div>
    <div id="detailsPanel">
        <iframe name="details" id="details" src="" frameBorder="0" >
        </iframe>
    </div>
</div>
</body>
</html>

CSS：

    #searchtext{
    width: 100%;
    border: 1em;
    height: 3em;
    border-color: black;
    border:1em;
    margin:0.5em;
}
#search{
    border-color: black;
    border:solid;
    width:100%;
    height:4em;
}
#searchSpan{
    display: block;
    overflow: hidden;
    border: 1em;
    border-color: #000;

}
div#cols{
    width:100%;
    margin:0.5em;

}
#hitList{
border-color: black;
border: solid;
width: 20%;
float: left;
height: 10em;
overflow: auto;
}
div#detailsPanel{
    border-color: black;
    border:solid;
    height: 10em;
}
ul{
    padding: 0em;
    margin:0em;
}
li{
    list-style: none;
    line-height: auto;
    border:solid;
    padding:0em;
    border-width:0.1em; 
}

链接将指向不同的 HTML 页面 A'B 和 c 等，这些页面将显示在详细信息面板中。

我使用 iframe 而不是 Div，因为在 iframe 上显示网页比在 div 上更容易（这是我的观点，可以更正。）

这是一个非常基本的解决方案，我快速制作并需要改进。希望这会有所帮助！

【讨论】：