Question

我正在尝试使用手机间隙为我的网络应用制作一个html页面，我需要占用整个页面的表格，所以我使用宽度：100％和高度：100％让表格占据整个页面;但是，当我使用宽度时，我希望我的按钮能够填满整个表格单元格：100％它占据了整个宽度，当你使用页面大小进行操作时它也会响应，但是当我使用高度时：100％它没有做任何事情。另一方面，当我操作按钮字体时，按钮的高度会发生变化。如何根据窗口和表格大小调整按钮和字体大小。这是我的HTML和CSS代码我也在使用twitter-bootstrap。提前谢谢！

    <!DOCTYPE html>

<html>
    <head>
        <?xml version="1.0" encoding="utf-8"?>
        <WebView  xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/webview"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
        />
        <manifest>
    <uses-permission android:name="android.permission.INTERNET" />
    </manifest>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="Description" />
        <link rel="stylesheet" href="Stylesheet Location" type="text/css" />
      <link rel="stylesheet" href="css/bootstrap.min.css"> 
        <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Settings</title>


 </head>
 <body>


    <table class="table table-borderless">
  <tr>
   <td><button class="btn btn-default btn-lg" type="button"><span class="glyphicon glyphicon-film" id="glyph1" style="vertical-align: middle"></span><br>Broadcast</button></td>
   <td><button class="btn btn-default btn-lg" type="button"><span class="glyphicon glyphicon-facetime-video" id="glyph1" style="vertical-align: middle"></span><br>Video</button></td>
  </tr>
  <tr>
   <td><button class="btn btn-default btn-lg" type="button"><span class="glyphicon glyphicon-music" id="glyph1" style="vertical-align: middle"></span><br>Audio</button></td>
   <td><button class="btn btn-default btn-lg" type="button"><span class="glyphicon glyphicon-wrench" id="glyph1" style="vertical-align: middle"></span><br>Network</button></td>
  </tr>
  <tr>
   <td><button class="btn btn-default btn-lg" type="button"><span class="glyphicon glyphicon-cog" id="glyph1" style="vertical-align: middle"></span><br>System</button></td>
   <td><button class="btn btn-default btn-lg" type="button"><span class="glyphicon glyphicon-question-sign" id="glyph1" style="vertical-align: middle"></span><br>Help</button></td>
  </tr>
  </table>


  <script type="text/javascript">
            WebView myWebView = (WebView) findViewById(R.id.webview);
      myWebView.loadUrl("file:///C:/Android/Apps/workshop/www/98001~ue.html");
  </script>

 </body>

    table, td {
    background:  #181812;
    border: 2px solid #333100;
}
body{
    background:  #181812;
}
.btn-default {
    background: #FC0;
    border: 2px solid red;
    width: 100%;
    padding-left: auto;
    padding-right: auto;
    }
tr {
    padding-top: auto;
    padding-bottom: auto;
    padding-right: auto;
    padding-left: auto;
}
body, html {
    height: 100%;
    padding:0;
    margin:0;
}
table {
    width: 100%;
    height: 100%;
}

Answer 1

在你的css上试试这个：

body,html{height:100%;width:100%;padding:0;margin:0;}

填充按钮表格单元格

1 个答案: