如何避免网站上的水平滚动条.. [英] How to avoid horizontal scrollbar on website..
本文介绍了如何避免网站上的水平滚动条..的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，我正在使用Bootstrap在Asp.Net中创建网页但是当我调整窗口Horizonztal滚动条出现在页面底部时。那么如何避免水平滚动条
Hello , I Am Creating A Webpages In Asp.Net Using Bootstrap But When I Resize Window Horizonztal Scrollbar Appear On Bottom Of Page .So How To Avoid Horizontal Scrollbar
<%@ Page Title="" Language="C#" MasterPageFile="~/AdminMaster.master" AutoEventWireup="true" CodeFile="MCompany.aspx.cs" Inherits="MCompany" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="Header">
<div class="row">
<div class="col-sm-6">
<h2 style="font-family:'Times New Roman'">Company Details</h2>
</div>
</div>
</div>
<br />
<br/>
<div class="container" style="margin-left:-60px;">
<div class="row" >
<div class="form-Horizontal">
<div class="form-group">
<div class="col-xs-2 ">
<asp:Label ID="Label1" runat="server" Text="ID" Font-Names="Times New Roman"></asp:Label>
</div>
<div class="col-xs-2">
<asp:TextBox ID="TxtCmpId" Class="form-control sm" runat="server" ReadOnly="True"></asp:TextBox>
</div>
<br />
<br />
<div class="col-xs-2">
<asp:Label ID="Label2" runat="server" Text="Name" Font-Names="Times New Roman"></asp:Label>
</div>
<div class="col-xs-3">
<asp:TextBox ID="TxtCmpName" Class="form-control sm" runat="server" ></asp:TextBox>
</div>
<br />
<br />
<div class="col-xs-2 ">
<asp:Label ID="Label3" runat="server" Text="Address" Font-Names="Times New Roman"></asp:Label>
</div>
<div class="col-xs-3">
<asp:TextBox ID="TxtCmpAddress" Class="form-control sm" runat="server" TextMode="MultiLine" ></asp:TextBox>
</div>
<br />
<br />
<br />
<div class="col-xs-2 ">
<asp:Label ID="Label4" runat="server" Text="City" Font-Names="Times New Roman"></asp:Label>
</div>
<div class="col-xs-3">
<asp:DropDownList ID="DropDownList2" runat="server" >
<asp:ListItem Value="0">---------</asp:ListItem>
<asp:ListItem Value="1">Pune</asp:ListItem>
<asp:ListItem Value="2">Mumbai</asp:ListItem>
<asp:ListItem Value="3">Nasik</asp:ListItem>
<asp:ListItem Value="4">Jalgaon</asp:ListItem>
<asp:ListItem Value="5">Dhule</asp:ListItem>
</asp:DropDownList>
</div>
<br />
<br />
<div class="col-xs-2">
<asp:Label ID="Label5" runat="server" Text="Vat Tin No" Font-Names="Times New Roman"></asp:Label>
</div>
<div class="col-xs-3">
<asp:TextBox ID="TxtVat" Class="form-control sm" runat="server"></asp:TextBox>
</div>
<br />
<br />
<div class="col-xs-2 " >
<asp:Label ID="Label6" runat="server" Text="Service Tax No" Font-Names="Times New Roman"></asp:Label>
</div>
<div class="col-xs-3">
<asp:TextBox ID="TxtSt" Class="form-control sm" runat="server" ></asp:TextBox>
</div>
<br />
<br />
<div class="col-md-6" >
<div class="form-inline" >
<div class="controls-row" >
<asp:Label ID="Label11" runat="server" Text="Active Status" Font-Names="Times New Roman"></asp:Label>
<div class="radio">
<label><input id="Radio1" type="radio" runat="server" name="optradio" style="margin-left:50px" checked="">Yes</label>
</div>
<div class="radio">
<label><input id="Radio2" type="radio" runat="server" name="optradio">No</label>
</div>
</div>
<br />
<br />
</div>
</div>
</div>
</div>
</div>
</div>
<div style="margin-left:50px">
<asp:Button ID="BtnSubmit" runat="server" Text="Submit" class="btn btn-default btn-lg" Style="background-color:#523141; color:white; " />
</div>
</asp:Content>
My Css
body {
\t
height:99.9%;
width:99.9%;
}
My Css
body {
height:99.9%;
width:99.9%;
}
#Header
{
margin-left:5px;
background-color:#523141;
color:white;
border-color:black;
width:80%;
height:auto;
font-family:'Times New Roman';
}
Master Page
Master Page
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="AdminMaster.master.cs" Inherits="AdminMaster" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="js/fliplightbox.min.js" ></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<link rel="stylesheet" href="SMenu.css" />
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/animate.css"/>
<link href="css/animate.min.css" rel="stylesheet"/>
<link href="SalStyle.css" rel="stylesheet" />
<style type="text/css">
.ui-datepicker {
background-color:lightpink;
border: 1px solid #555;
color: #000000;
font-size:20px;
}
.auto-style2
{
width: 20%;
}
.auto-style3
{
width: 80%;
height: 100%;
}
.Hands
{
cursor:pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server" role="form">
<div class="navbar-fixed-top">
<nav class="navbar navbar-inverse" style="background-color: #ff6666; color:black">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Saloon</a>
</div>
<div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="MHome.aspx"><span class="glyphicon glyphicon-log-home"></span>Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Registers<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="MCompany.aspx">Company</a></li>
<li><a href="MBranch.aspx">Branch</a></li>
<li><a href="MCustomer.aspx">Customer</a></li>
<li><a href="MEmployee.aspx">Employee</a></li>
<li><a href="MProduct.aspx">Products</a></li>
<li><a href="Mservices.aspx">Services</a></li>
<li><a href="MCatalog.aspx">Product Catelog</a></li>
</ul>
</li>
<li style="color:black"><a href="MAppointment.aspx">Appointments</a></li>
<li style="color:black"><a href="MBilling.aspx">Pos</a></li>
<li style="color:black"><a href="MPhoto.aspx">Photo Gallary</a></li>
<li style="color:black"><a href="#">Page 5</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> LogOut</a></li>
</ul>
</div>
</div>
</nav>
</div>
<br />
<div class="container">
<div class="img-responsive" style="margin-left:-15px; margin-right:-15px">
<img src="img/banner-img.jpg" style="width:102%; height:400px" />
</div>
</div>
</div>
<div style="vertical-align:top">
<br />
<table align="left" class="auto-style2" style="display:inline-block; height:800px; background-color:#E0E0E0; width:150px">
<tr >
<td style="background-color:pink; text-align:center;width:300px"><h4>Manage Register </h4></td>
</tr>
<tr style="margin-top:10px">
<td style="background-color:#E0E0E0; width:300px">
<asp:HyperLink ID="HypComp" runat="server" CssClass="Hands" Style="color: #523141; text-align:center" NavigateUrl="~/MCompany.aspx" Font-Names="Times New Roman">Company</asp:HyperLink></td>
</tr>
<tr style="margin-top:20px">
<td style="background-color:#E0E0E0; width:300px" ><asp:HyperLink ID="HypBranches" runat="server" CssClass="Hands" Style="color:#523141; " NavigateUrl="~/MBranch.aspx" Font-Names="Times New Roman" > Branch </asp:HyperLink></td>
</tr>
<tr>
<td style="background-color:#E0E0E0; width:300px"><asp:HyperLink ID="HyperLink1" runat="server" CssClass="Hands" Style="color:#523141; " NavigateUrl="~/MCustomer.aspx" Font-Names="Times New Roman"> Customer </asp:HyperLink></td>
</tr>
<tr>
<td style="background-color:#E0E0E0; width:300px"><asp:HyperLink ID="HyperLink2" runat="server" CssClass="Hands" Style="color:#523141; " NavigateUrl="~/MEmployee.aspx" Font-Names="Times New Roman"> Employee </asp:HyperLink></td>
</tr>
<tr>
<td style="background-color:#E0E0E0; width:300px"><asp:HyperLink ID="HyperLink3" runat="server" CssClass="Hands" Style="color:#523141; " NavigateUrl="~/MProduct.aspx" Font-Names="Times New Roman"> Products </asp:HyperLink></td>
</tr>
<tr>
<td style="background-color:#E0E0E0; width:300px"> <asp:HyperLink ID="HyperLink4" runat="server" CssClass="Hands" Style="color:#523141; " NavigateUrl="~/Mservices.aspx" Font-Names="Times New Roman">Services</asp:HyperLink></td>
</tr>
<tr>
<td style="background-color:#E0E0E0; width:300px"><asp:HyperLink ID="HyperLink5" runat="server" CssClass="Hands" Style="color:#523141; " NavigateUrl="~/MCatalog.aspx" Font-Names="Times New Roman">Product Cateloge</asp:HyperLink></td>
</tr>
<tr>
<td style="background-color:#E0E0E0; width:300px"></td>
</tr>
</table>
</div>
<div style="vertical-align:top">
<table align="left" cellspacing="5" class="auto-style3" style="margin-top:0px; display:inline-block; width:700px; margin-left:0px">
<tr>
<td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</td>
</tr>
</table>
</div>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</form>
</body>
</html>推荐答案
body{ overflow-x: hidden;}
i am new to c# coding but i hope that this will resolve your issue
or else try this body { min-width: 1167px; }
body{ overflow-x: hidden;}
i am new to c# coding but i hope that this will resolve your issue
or else try this body { min-width: 1167px; }
这篇关于如何避免网站上的水平滚动条..的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
