Question

我搜索了很多，但我不是开发人员，我最终得到的是一种几乎工作的css（我认为）很多无用的代码..侧边栏在窗口调整大小时调整大小。显示输入字段和按钮不在行中。在Firefox上，差异并不是那么令人讨厌，但在Chrome中它是一团糟......

的index.html

<html>
<body>
<iframe width="100%" height="29%" style="border:none" align="top" id="iframe_clock" name="iframe_clock" src="http://10.11.12.13:3118/index2.html"></iframe>
<iframe width="24%" height="70%" style="border:none" align="left" id="file2" name="file2" src="file2.php"></iframe>
<iframe width="75%" height="67%" style="border:none" align="right" id="read" name="read" src="read.php"></iframe>
</body>
</html>

file2.php（侧边栏）

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pure-min.css">
<link rel="stylesheet" href="iframe.css">
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
  $( "#datepicker1" ).datepicker({changeYear: true, changeMonth: true, dateFormat: 'dd/mm/yy' });
  $( "#datepicker2" ).datepicker({changeYear: true, changeMonth: true, dateFormat: 'dd/mm/yy' });
});
</script>
</head>

<?php
$conn = pg_pconnect("host=[connection of the server]");
if (!$conn) {
  echo "Can't connect to database.\n";
  exit;
}

$sql = "SELECT name FROM counterparties";
$result1 = pg_query($conn, $sql);
?>

<body>
<div id="sidebar">
     <div id="inputContainer">
<form method="post" action="read.php" class="pure-form">
<fieldset class="pure-group">
<input id="datepicker1" type="text" class="pure-input-1-2" placeholder="From" name="fdate"><br />
<input id="datepicker2" type="text" class="pure-input-1-2" placeholder="To" name="tdate"><br />
<input type="text" class="pure-input-1-2" placeholder="Id" name="identification"><br />
<select name="counterparty">
<?php
while ($row = pg_fetch_row($result1)) {
echo "<option class=pure-input-1-2 value=$row[0]>$row[0]</option>";
}
?>
<option class="pure-input-1-2" value="%%">ALL</option>
</select>&nbsp;
<select name="direction">
<option class="pure-input-1-2" value="RECEIVED">RECEIVED</option>
<option class="pure-input-1-2" value="SENT">SENT</option>
<option class="pure-input-1-2" value="ALL">ALL</option>
</select><br />
<button type="submit" name="submit" class="pure-button pure-input-1-2 pure-button-primary" onclick="this.form.target='read';return true;">Send</button>
</fieldset>
</form>
     </div>
</div>
</body>
</html>

iframe.css（侧边栏的样式）

body { height: 100% }
#sidebar {
    position: fixed;
    top: 0;
    height: 100%;
    left: 10%;
    width: 100%;
}
#sidebar #inputContainer {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 21px;
    left: 30px;
    right: 30px;
}
#inputContainer{
    width: 100%;
}

所以，侧边栏位于左边的iframe内部，我希望它从右边开始（靠近框架的右边框），我希望当整个网页调整大小（不同的显示器分辨率）时，侧边栏会拉伸（如果不能让它保持固定宽度）但保持对齐..当然，它与iframe的右侧对齐。

我确定上面的许多代码都不好，所以请随意修改，因为您认为它可以正常工作/看起来更好。感谢你们！

Answer 1

试试这个，我会编辑我的答案，如果它不起作用。

#sidebar {
    position: fixed;
    top: 0;
    height: 100%;
    right: 0;
    width: 100%;
}

Answer 2

我不知怎的做了..

CSS

#container
{
    width: 450px;
    max-width: 98%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    min-height: 100%;
    left: 20%;
}
#sidebar
{
    position: fixed;
    width: 450px;
    padding-top: 100px;
    text-align: left;
}

在html上，我刚才改变了 <div id="sidebar"><div id="inputContainer">致<div id="container"><div id="sidebar"> Because this looks cleaner.

iframe侧边栏css

2 个答案: